{# vars: title, subheading, breadcrumbs, header_actions, host, record (optional), eyebrow (optional) #}
{% import "tungsten/components/ui.html" as ui %}
<header class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
  <div class="min-w-0">
    {{ ui.breadcrumbs(breadcrumbs) }}
    {% if eyebrow %}<p class="mb-1 text-xs font-semibold uppercase tracking-widest text-gray-500">{{ eyebrow }}</p>{% endif %}
    <h1 class="truncate text-2xl font-bold tracking-tight text-gray-950 sm:text-3xl dark:text-white">{{ title }}</h1>
    {% if subheading %}<p class="mt-1 text-sm text-gray-500 sm:text-base dark:text-gray-400">{{ subheading }}</p>{% endif %}
  </div>
  <div class="flex flex-wrap items-center gap-3">
    {% for a in header_actions or [] %}{{ a.render(ctx, host, record if record is defined else None, style=(None if a._style or a.__class__.__name__ == 'ActionGroup' else 'button')) }}{% endfor %}
    {% if extra_actions is defined %}{{ extra_actions }}{% endif %}
  </div>
</header>