{% load static %}
<header class="flex h-14 shrink-0 items-center justify-between border-b border-white/10 bg-ruforum-topbar px-4">

  {# ── Left: hamburger + page title ─────────────────────────── #}
  <div class="flex items-center gap-3">
    <button
      type="button"
      class="md:hidden rounded-lg p-1.5 text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/40"
      @click="sidebarOpen = true"
      aria-label="Open menu"
    >
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
    <span class="font-display text-sm font-semibold text-white/80">
      {% block page_title_nav %}IILMP{% endblock %}
    </span>
  </div>

  {# ── Right: notifications + user menu ─────────────────────── #}
  <div class="flex items-center gap-1">

    {# Notifications bell #}
    <a
      href="{% url 'core:notification_inbox' %}"
      class="relative rounded-lg p-2 text-white/70 transition-colors hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white/40"
      aria-label="Notifications"
    >
      <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
      </svg>
      {% include "notifications/partials/badge.html" with unread_count=0 %}
    </a>

    {# User menu #}
    <div class="relative" x-data="{ open: false }">
      <button
        type="button"
        class="ml-1 flex items-center gap-2.5 rounded-lg py-1.5 pl-2 pr-3 text-sm transition-colors hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/40"
        @click="open = !open"
        :aria-expanded="open"
      >
        {% include "components/user_avatar.html" with user=request.user size="sm" variant="on_dark" only %}
        <span class="hidden max-w-[9rem] truncate text-white/80 sm:block">
          {{ request.user.get_full_name|default:request.user.email }}
        </span>
        <svg class="h-3.5 w-3.5 shrink-0 text-white/50 transition-transform duration-150" :class="open && 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      <div
        x-show="open"
        @click.outside="open = false"
        x-cloak
        class="absolute right-0 z-50 mt-2 w-64 origin-top-right rounded-xl border border-ruforum-border bg-white shadow-dropdown"
      >
        {# ── User info header ──────────────────────────── #}
        <div class="flex items-center gap-3 px-4 py-3.5">
          {% include "components/user_avatar.html" with user=request.user size="ml" variant="on_light" only %}
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-semibold text-ruforum-text">
              {{ request.user.get_full_name|default:request.user.email }}
            </p>
            <p class="mt-0.5 font-meta text-xs text-ruforum-text-muted">
              {% if request.user.role %}{{ request.user.role|title }}{% elif request.user.is_superuser %}Superuser{% elif request.user.is_staff %}Staff{% else %}User{% endif %}
            </p>
          </div>
        </div>

        <div class="mx-3 mt-1 h-px bg-ruforum-border"></div>

        {# ── Actions ────────────────────────────────────── #}
        <div class="py-1.5">
          <a href="{% url 'accounts:profile' %}" class="flex items-center gap-2.5 px-4 py-2 text-sm text-ruforum-text transition-colors hover:bg-ruforum-warm-hover">
            <svg class="h-4 w-4 shrink-0 text-ruforum-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>
            </svg>
            Profile
          </a>

          {% if user.is_staff %}
          <a href="{% url 'admin:index' %}" class="flex items-center gap-2.5 px-4 py-2 text-sm text-ruforum-text transition-colors hover:bg-ruforum-warm-hover">
            <svg class="h-4 w-4 shrink-0 text-ruforum-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5"/>
            </svg>
            Admin panel
          </a>
          {% endif %}
        </div>

        <div class="mx-3 h-px bg-ruforum-border"></div>

        <div class="py-1.5">
          <a href="{% url 'accounts:logout' %}" class="flex items-center gap-2.5 px-4 py-2 text-sm text-red-600 transition-colors hover:bg-red-50">
            <svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75">
              <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>
            Sign out
          </a>
        </div>
      </div>
    </div>

  </div>
</header>