{# vars: title, subheading, breadcrumbs, header_actions, host, record (optional), eyebrow (optional),
   title_suffix (optional, e.g. an emoji), hero (optional: soft glow behind the header) #}
{% import "tungsten/components/ui.html" as ui %}
<header id="tw-page-header" class="relative mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
  {% if hero is defined and hero %}
  <div class="pointer-events-none absolute -inset-x-4 -top-10 -z-10 h-48 sm:-inset-x-6 lg:-inset-x-8 overflow-hidden" aria-hidden="true">
    <div class="absolute -top-24 start-1/3 h-64 w-[36rem] rounded-full bg-primary-400/15 blur-3xl dark:bg-primary-500/10"></div>
    <div class="absolute -top-16 end-0 h-48 w-80 rounded-full bg-primary-200/30 blur-3xl dark:bg-primary-500/5"></div>
  </div>
  {% endif %}
  <div class="min-w-0">
    {{ ui.breadcrumbs(breadcrumbs) }}
    {% if eyebrow %}<p class="mb-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">{{ eyebrow }}</p>{% endif %}
    <h1 class="truncate text-2xl font-semibold tracking-tight text-gray-950 sm:text-[2.1rem] sm:leading-tight dark:text-white">{{ title }}{% if title_suffix is defined and title_suffix %} <span class="inline-block origin-[70%_70%] motion-safe:animate-[tw-wave_1.6s_ease-in-out_1]">{{ title_suffix }}</span>{% endif %}</h1>
    {% if subheading %}<p class="mt-1 text-sm text-gray-500 sm:text-base dark:text-gray-400">{{ subheading }}</p>{% endif %}
  </div>
  {% set _hook_args = {'host': host, 'record': record if record is defined else None} %}
  <div id="tw-page-header-actions" class="flex flex-wrap items-center gap-3">
    {% if ctx and ctx.panel %}{{ ctx.panel.hooks('page.header-actions.before', ctx, **_hook_args) }}{% endif %}
    {% 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 %}
    {% if ctx and ctx.panel %}{{ ctx.panel.hooks('page.header-actions.after', ctx, **_hook_args) }}{% endif %}
  </div>
  {% if ctx and ctx.request and ctx.request.query_params.get('action') %}
  {#- ?action=<name> opens that action's modal as the page loads -#}
  {{ open_action_from_url(ctx, host, header_actions or [], _hook_args.record) }}
  {% if table is defined and table and table.host is defined %}{{ open_action_from_url(ctx, table.host, table._header_actions, None, table_id=table.id) }}{% endif %}
  {% endif %}
</header>