{#
  UI/UX V2 Phase 1A — Page header component (INERT UNTIL INCLUDED)

  Expected optional context:
    page_title_v2 (string)
    page_description_v2 (string)
    back_url_v2 (string)
    back_label_v2 (default "Back")
    page_actions_v2: list of mappings:
      label, url, variant(primary|secondary|danger), visible, external

  This component never discovers, moves, hides or rewrites existing page buttons.
#}
{% set _title = page_title_v2|default('', true) %}
{% set _description = page_description_v2|default('', true) %}
{% set _back_url = back_url_v2|default('', true) %}
{% set _back_label = back_label_v2|default('Back', true) %}
{% set _actions = page_actions_v2|default([], true) %}

{% if _title or _description or _back_url or _actions %}
<header class="space-y-3" data-uiux-v2="page-header">
  {% if _back_url %}
    <div>
      <a href="{{ _back_url }}" class="inline-flex items-center gap-1.5 rounded-lg px-1 py-1 text-sm font-semibold text-slate-600 transition hover:text-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500">
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M17 10a.75.75 0 0 1-.75.75H5.56l3.22 3.22a.75.75 0 1 1-1.06 1.06l-4.5-4.5a.75.75 0 0 1 0-1.06l4.5-4.5a.75.75 0 0 1 1.06 1.06L5.56 9.25h10.69A.75.75 0 0 1 17 10Z" clip-rule="evenodd" />
        </svg>
        <span>{{ _back_label }}</span>
      </a>
    </div>
  {% endif %}

  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
    <div class="min-w-0">
      {% if _title %}
        <h1 class="text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">{{ _title }}</h1>
      {% endif %}
      {% if _description %}
        <p class="mt-1 max-w-3xl text-sm leading-6 text-slate-600">{{ _description }}</p>
      {% endif %}
    </div>

    {% if _actions %}
      <div class="flex shrink-0 flex-wrap items-center gap-2" aria-label="Page actions">
        {% for action in _actions %}
          {% if action.get('visible', true) %}
            {% set _variant = action.get('variant', 'secondary') %}
            {% set _classes = 'bg-brand-600 text-white hover:bg-brand-700 focus-visible:ring-brand-500' if _variant == 'primary' else ('bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500' if _variant == 'danger' else 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:text-slate-950 focus-visible:ring-brand-500') %}
            <a
              href="{{ action.get('url', '#') }}"
              class="inline-flex min-h-10 items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 {{ _classes }}"
              {% if action.get('external', false) %}target="_blank" rel="noopener noreferrer"{% endif %}
            >
              {{ action.get('label', '') }}
            </a>
          {% endif %}
        {% endfor %}
      </div>
    {% endif %}
  </div>
</header>
{% endif %}