{# Main app header: Aird + profile + Browse + feature nav + theme selector.
   Optional overrides: nav_title, nav_search_path, show_admin_link (BaseHandler defaults).
   Layout: place this include inside the same outer wrapper as page content, e.g.
   <div class="container mx-auto p-4"> …header… …content… </div> (same as browse/share/search). #}
<div class="navbar bg-base-200 shadow-sm rounded-box mb-4 flex-wrap gap-2">
  <div class="flex-1">
    <a href="/files/" class="btn btn-ghost text-xl font-extrabold tracking-wide gap-1 px-2" aria-label="Aird Home">
      <img src="/static/img/logo-icon.png" alt="" aria-hidden="true" class="h-8 w-auto shrink-0">
      <img src="/static/img/logo-text.png" alt="Aird" class="h-5 w-auto shrink-0">
    </a>
  </div>
  <div class="flex items-center gap-1 flex-wrap">
    {% if current_user %}
    <a href="/profile" class="btn btn-ghost btn-sm gap-1" title="Profile settings">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
      <span class="hidden sm:inline">{{ handler.get_display_username() }}</span>
    </a>
    {% else %}
    <span class="btn btn-ghost btn-sm gap-1 no-animation cursor-default">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
      <span class="hidden sm:inline">Guest</span>
    </span>
    {% end %}

    <div class="dropdown dropdown-end">
      <button type="button" tabindex="0" class="btn btn-ghost btn-sm" title="Change theme" aria-haspopup="menu" aria-label="Theme menu">
        <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
        <span class="hidden sm:inline text-xs">Theme</span>
      </button>
      <ul class="dropdown-content menu bg-base-200 rounded-box z-50 w-44 p-2 shadow-lg border border-base-300">
        <li><button type="button" data-set-theme="light" class="text-sm">☀️ Light</button></li>
        <li><button type="button" data-set-theme="dark" class="text-sm">🌙 Dark</button></li>
        <li><button type="button" data-set-theme="nord" class="text-sm">❄️ Nord</button></li>
        <li><button type="button" data-set-theme="dracula" class="text-sm">🧛 Dracula</button></li>
        <li><button type="button" data-set-theme="cyberpunk" class="text-sm">🤖 Cyberpunk</button></li>
        <li><button type="button" data-set-theme="retro" class="text-sm">📺 Retro</button></li>
        <li><button type="button" data-set-theme="autumn" class="text-sm">🍂 Autumn</button></li>
      </ul>
    </div>

    <a href="/files/" class="btn btn-ghost btn-sm gap-1" title="Browse files">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/></svg>
      <span class="hidden sm:inline">Browse</span>
    </a>
    {% if is_feature_enabled('super_search', True) %}
    <a href="/search?path={{ escape(nav_search_path or '') }}" class="btn btn-ghost btn-sm gap-1" title="Super Search">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      <span class="hidden sm:inline">Search</span>
    </a>
    {% end %}
    {% if is_feature_enabled('file_share', True) %}
    <a href="/share" class="btn btn-ghost btn-sm gap-1" title="Share files">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
      <span class="hidden sm:inline">Share</span>
    </a>
    {% end %}
    {% if is_feature_enabled('p2p_transfer', True) %}
    <a href="/p2p" class="btn btn-ghost btn-sm gap-1" title="Peer-to-peer transfer">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
      <span class="hidden sm:inline">P2P</span>
    </a>
    {% end %}
    {% if show_admin_link %}
    {% if current_user and current_user.get("role") == "admin" %}
    <a href="/admin" class="btn btn-primary btn-sm gap-1" title="Administration">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
      <span class="hidden sm:inline">Admin</span>
    </a>
    {% end %}
    {% end %}
    {% if current_user %}
    <button type="button" class="btn btn-ghost btn-sm gap-1" title="Command palette (Cmd+K / Ctrl+K)"
            data-aird-cmdk>
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      <span class="hidden sm:inline">⌘K</span>
    </button>
    {% end %}
    {% if current_user %}
    <a href="/logout" class="btn btn-ghost btn-sm gap-1 text-error" title="Log out">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
      <span class="hidden sm:inline">Logout</span>
    </a>
    {% else %}
    <a href="/login" class="btn btn-neutral btn-sm gap-1" title="Log in">
      <svg class="hdr-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
      <span class="hidden sm:inline">Login</span>
    </a>
    {% end %}
  </div>
</div>
<script src="/static/js/common/command-palette.js" defer></script>
{% if current_user %}
<script nonce="{{ csp_nonce }}" src="/static/js/feature-flags-live.js" defer></script>
{% end %}