{# T28 admin top header. Sticky, white bg, h-14. Left: hamburger (mobile #}
{# only — JS-free no-op placeholder; CSS-only collapse handles <lg) +    #}
{# breadcrumb. Right: user email + role badge + sign-out form (POSTs to  #}
{# /dashboard/logout with the same csrf_token meta).                     #}
<header class="sticky top-0 z-10 bg-white border-b border-gray-200 h-14 px-6 flex items-center justify-between">
  <div class="flex items-center gap-3 min-w-0">
    {# Hamburger — visible <lg. Currently presentational; collapse uses   #}
    {# Tailwind responsive width classes on the sidebar.                  #}
    <button type="button" class="lg:hidden p-1.5 rounded hover:bg-gray-100 text-gray-600" aria-label="Toggle navigation">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
      </svg>
    </button>
    <nav class="text-sm text-gray-500 truncate" aria-label="Breadcrumb">
      {% block breadcrumb %}<span class="text-gray-900 font-medium">Admin</span>{% endblock %}
    </nav>
  </div>
  <div class="flex items-center gap-3">
    <span class="hidden sm:inline text-sm text-gray-600 truncate max-w-xs">{{ user_email }}</span>
    {% if user_role == 'super_admin' %}
      <span class="px-2 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-blue-600 text-white">Super admin</span>
    {% elif user_role == 'admin' %}
      <span class="px-2 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-gray-600 text-white">Admin</span>
    {% else %}
      <span class="px-2 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide bg-gray-200 text-gray-700">{{ user_role }}</span>
    {% endif %}
    <form method="post" action="/dashboard/logout" class="m-0">
      <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
      <button type="submit" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-gray-700 border border-gray-200 rounded hover:bg-gray-100" title="Sign out">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
        </svg>
        <span class="hidden sm:inline">Sign out</span>
      </button>
    </form>
  </div>
</header>