{# partials/topbar.html — top navigation bar #}
<header class="admin-topbar">
  {# Left zone: collapse toggle, logo, divider #}
  <div class="topbar-left">
    <button class="collapse-toggle"
            @click="window.innerWidth < 768 ? toggleMobileSidebar() : sidebarCollapsed = !sidebarCollapsed"
            title="Toggle sidebar">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="18" height="18">
        <use href="/static/icons/heroicons.svg#bars-3"/>
      </svg>
    </button>

    <a href="{{ admin_path | default('/admin') }}/" class="topbar-logo">
      {% if admin_config.logo %}
      <img src="{{ admin_config.logo }}" alt="Logo" style="height: 28px; max-width: 120px;">
      {% else %}
      <span>{{ admin_config.title | default("Admin") }}</span>
      {% endif %}
    </a>

    <div class="topbar-divider"></div>
  </div>

  {# Center zone: breadcrumb #}
  <div class="topbar-center">
    <nav class="breadcrumb">
      <a href="{{ admin_path | default('/admin') }}/" class="breadcrumb-segment">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
          <use href="/static/icons/heroicons.svg#home"/>
        </svg>
      </a>
      {% block breadcrumb %}
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current">{{ title | default("Dashboard") }}</span>
      {% endblock %}
    </nav>
  </div>

  {# Right zone: search trigger, theme toggle, user avatar #}
  <div class="topbar-right">
    {# Search trigger #}
    <button class="icon-btn search-trigger"
            @click="$dispatch('open-command-palette')"
            title="Search (⌘K)">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <use href="/static/icons/heroicons.svg#magnifying-glass"/>
      </svg>
      <span class="kbd">⌘K</span>
    </button>

    {# Theme toggle #}
    <button class="icon-btn"
            @click="$store.theme.toggle()"
            title="Toggle dark mode">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" x-show="!$store.theme.dark">
        <use href="/static/icons/heroicons.svg#moon"/>
      </svg>
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" x-show="$store.theme.dark" style="display: none;">
        <use href="/static/icons/heroicons.svg#sun"/>
      </svg>
    </button>

    {# User avatar dropdown #}
    <div class="relative" x-data="{ open: false }">
      <button @click="open = !open" @click.outside="open = false"
              class="flex items-center gap-2 p-1 rounded-md hover:bg-[var(--surface-overlay)] transition-colors">
        <div class="user-avatar">
          {{ admin_user.full_name[0] | upper if admin_user and admin_user.full_name else "A" }}
        </div>
      </button>

      <div x-show="open"
           x-transition:enter="transition ease-out duration-100"
           x-transition:enter-start="opacity-0 scale-95"
           x-transition:enter-end="opacity-100 scale-100"
           x-transition:leave="transition ease-in duration-75"
           x-transition:leave-start="opacity-100 scale-100"
           x-transition:leave-end="opacity-0 scale-95"
           class="user-dropdown"
           style="display: none;">
        <div class="user-dropdown-header">
          <div class="user-dropdown-name">{{ admin_user.full_name | default("Admin") }}</div>
          <div class="user-dropdown-email">{{ admin_user.email | default("") }}</div>
        </div>
        <a href="{{ admin_path | default('/admin') }}/profile/" class="user-dropdown-item">
          Profile
        </a>
        <form method="post" action="{{ admin_path | default('/admin') }}/logout/">
          <button type="submit" class="user-dropdown-item danger">
            Sign out
          </button>
        </form>
      </div>
    </div>
  </div>
</header>