{# Page-header card.

   Common shape across every detail page:
     - back-breadcrumb on its own row
     - ui-surface card with title + optional caption row of chips

   Two macros:
     - back_link(href, label) - the small breadcrumb row
     - header_card(title, caption=None) - the white card with title

   Both are usable independently; pair them for the full pattern.

   Parameters (back_link):
     - href     (str) URL of the parent listing
     - label    (str) link text (eg. "Opportunities", "Failures")

   Parameters (header_card):
     - title    (str) page title (can be safe HTML for code wrapping)
     - caption  (str, optional) sub-line shown under the title

   Use as ``{% call header_card(title=...) %}<chips here>{% endcall %}``
   when the page wants custom chip markup under the title; the body
   of the call replaces the default caption row.
#}
{%- macro back_link(href, label) -%}
  <div>
    <a href="{{ href }}" class="text-sm text-brand-500 dark:text-brand-300 hover:underline whitespace-nowrap">&larr; {{ label }}</a>
  </div>
{%- endmacro %}

{%- macro header_card(title, caption=None) -%}
  <div class="ui-surface p-6 md:p-7">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div class="min-w-0 max-w-full" style="min-width: 0; max-width: 100%;">
        <div class="flex items-center gap-2 min-w-0 max-w-full" style="min-width: 0; max-width: 100%; width: 100%;">
          <h1 class="ui-page-title mt-0" style="max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; padding-bottom: 0.25rem;">{{ title }}</h1>
        </div>
        {%- if caller is defined %}
        <div class="mt-3 flex flex-wrap items-center gap-2">
          {{ caller() }}
        </div>
        {%- elif caption %}
        <div class="mt-3 flex flex-wrap items-center gap-2">
          <span class="text-sm font-medium text-brand-600 dark:text-brand-300">{{ caption }}</span>
        </div>
        {%- endif %}
      </div>
    </div>
  </div>
{%- endmacro %}