{# Shared header for content items: title, subtitle, meta row, tags. #}
{# Expected context vars: item (UnifiedContentItem fields), lang #}
<header class="mb-8">
  <h1 class="text-3xl font-bold ds-text mb-2">{{ item.title }}</h1>
  {% if item.subtitle %}
    <p class="text-xl ds-text-muted mb-4">{{ item.subtitle }}</p>
  {% endif %}
  <div class="flex flex-wrap items-center gap-3 text-sm ds-text-muted mb-4">
    {% if item.author %}
      <span>{{ item.author }}</span>
      <span aria-hidden="true">·</span>
    {% endif %}
    {% if item.created_at %}
      <time datetime="{{ item.created_at }}">{{ item.created_at | truncate_words(1) }}</time>
    {% endif %}
    {% if item.read_time %}
      <span aria-hidden="true">·</span>
      <span>{{ item.read_time }}</span>
    {% endif %}
  </div>
  {% if item.tags %}
    <div class="flex flex-wrap gap-2" aria-label="Tags">
      {% for tag in item.tags %}
        <a href="/{{ item.content_type }}?tag={{ tag | slugify }}"
           class="px-2 py-0.5 text-xs rounded-full border border-current ds-text-muted hover:ds-text transition-colors no-underline"
           hx-get="/{{ item.content_type }}?tag={{ tag | slugify }}"
           hx-target="#main-content"
           hx-swap="innerHTML"
           hx-push-url="true">{{ tag }}</a>
      {% endfor %}
    </div>
  {% endif %}
</header>
