{# Top navigation bar with page title area and user menu.
   Included in base.html when user is authenticated. #}

<header class="flex items-center justify-between px-6 py-3 border-b border-gray-200 bg-white">
  {# Page title area (can be overridden by blocks) #}
  <div>
    {% block page_title %}{% endblock %}
  </div>

  {# User menu #}
  <div class="flex items-center gap-4" x-data="{ open: false }">
    <span class="text-sm text-gray-600">{{ user.email }}</span>
    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
      {% if user.role == 'admin' %}bg-red-100 text-red-800
      {% elif user.role == 'editor' %}bg-blue-100 text-blue-800
      {% else %}bg-gray-100 text-gray-800{% endif %}">
      {{ user.role }}
    </span>

    {# Dropdown toggle #}
    <div class="relative">
      <button
        @click="open = !open"
        @click.outside="open = false"
        class="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M19 9l-7 7-7-7"/>
        </svg>
      </button>

      <div
        x-show="open"
        x-transition
        class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black/5 z-50"
      >
        <a href="/dash/logout"
           class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">
          Sign out
        </a>
      </div>
    </div>
  </div>
</header>