{% use_elements %}
{# Admin header partial — top bar + pinned/recent tabs strip. The "Menu"
   button at the right end of the tabs row opens a Basecoat popover
   containing the full app/packages nav with a filter input. #}
{# Context: app_name, user, nav_tabs, slug, parent_view_classes, pinned_slugs, admin_registry #}

<header id="admin-header" class="sticky top-0 z-50 pt-2 bg-admin-header-bg/95 supports-[backdrop-filter]:bg-admin-header-bg/75 backdrop-blur">
    <!-- Top row -->
    <div class="flex items-center justify-between px-4 lg:px-8 h-11">
        <div class="flex items-center gap-1.5">
            {% include "admin/header_branding.html" %}
        </div>

        <div class="flex items-center gap-2 sm:gap-3">
            <!-- Search (desktop) -->
            <form method="GET" action="{{ url('admin:search') }}" class="hidden sm:flex">
                <admin.SearchInput
                    name="query"
                    id="topbar-search"
                    value={global_search_query|default('')}
                    placeholder="Search..."
                    class="w-52 pr-10 pl-8 text-sm bg-admin-muted/60 border border-transparent py-1.5 rounded-admin-md transition-all duration-150 placeholder:text-admin-muted-foreground focus:outline-none focus:bg-admin-background focus:border-admin-input focus:ring-1 focus:ring-admin-ring focus:w-64"
                    />
            </form>

            <!-- Search (mobile) -->
            <a
                href="{{ url('admin:search') }}"
                class="sm:hidden admin-btn admin-btn-sm admin-btn-icon admin-btn-ghost text-admin-muted-foreground"
            >
                <admin.Icon name="search" />
            </a>

            <!-- Preflight -->
            {% set preflight_total = preflight_counts.errors + preflight_counts.warnings %}
            <a
                href="{{ url('admin:preflight') }}"
                class="relative admin-btn admin-btn-sm admin-btn-icon admin-btn-ghost text-admin-muted-foreground"
                title="Preflight checks"
            >
                <admin.Icon name="shield-check" />
                {% if preflight_total > 0 %}
                <span
                    data-status="{{ 'error' if preflight_counts.errors else 'warning' }}"
                    class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 text-[10px] font-bold leading-4 text-center text-white rounded-full data-[status=error]:bg-admin-danger data-[status=warning]:bg-admin-warning"
                >{{ preflight_total }}</span>
                {% endif %}
            </a>

            <div class="admin-dropdown-menu">
                <button
                    type="button"
                    aria-haspopup="menu"
                    aria-expanded="false"
                    aria-controls="user-menu-popover"
                    class="flex items-center cursor-pointer"
                >
                    {% set avatar_url = user.get_avatar_url() if user.get_avatar_url is defined else None %}
                    {% if avatar_url %}
                        <img
                            src="{{ avatar_url }}"
                            alt="{{ user }}"
                            class="w-7 h-7 rounded-full"
                        />
                    {% else %}
                        <div class="w-7 h-7 rounded-full bg-admin-muted flex items-center justify-center">
                            <admin.Icon name="person-circle" class="text-admin-muted-foreground" />
                        </div>
                    {% endif %}
                </button>
                <div id="user-menu-popover" data-popover data-align="end" aria-hidden="true" class="w-48">
                    {% if not admin_force_theme %}
                    {# Theme switcher. Sits outside [role=menu] so the
                       dropdown-menu's keyboard nav skips it; the segmented
                       control owns its own roving tabindex + arrow keys. #}
                    <div class="admin-segmented mx-1 mt-1" role="radiogroup" aria-label="Theme">
                        {% for slug, icon, label in [("light", "sun", "Light"), ("dark", "moon-stars", "Dark"), ("system", "display", "System")] %}
                        <button
                            type="button"
                            role="radio"
                            data-theme-set="{{ slug }}"
                            aria-checked="false"
                            class="flex flex-col items-center gap-0.5 py-1.5 text-[11px]"
                        >
                            <admin.Icon name={icon} />
                            {{ label }}
                        </button>
                        {% endfor %}
                    </div>
                    <div role="separator"></div>
                    {% endif %}
                    <div role="menu">
                        {% include "admin/user_menu_items.html" ignore missing %}
                        <a role="menuitem" href="{{ url('admin:settings') }}">
                            <admin.Icon name="gear" />
                            App Settings
                        </a>
                        <form method="POST" action="{{ url('admin:logout') }}">
                            <button role="menuitem" type="submit" class="w-full text-left">
                                <admin.Icon name="box-arrow-right" />
                                Log out
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pinned + recent tabs row. The Menu button at the right opens a
         Basecoat popover holding the full app/packages nav with filter. -->
    <nav id="pinned-nav" class="relative flex items-center justify-between px-4 lg:px-8">
        <!-- Bottom baseline. Sits behind the tabs so the active tab's
             border-b can paint over the bottom 1px of its underline,
             merging visually with the line. -->
        <div class="absolute inset-x-0 bottom-0 h-px bg-admin-border z-0"></div>
        <div id="nav-tabs-container" class="relative z-10 flex items-center -ml-3 overflow-x-auto admin-scrollbar-hide" data-reorder-url="{{ url('admin:reorder') }}">
            {% for tab in nav_tabs %}
            {% set nav_url = tab.view.get_view_url() %}
            {% set view_slug = tab.view.get_slug() %}
            {% set is_current = view_slug == slug or tab.view in parent_view_classes %}
            <a
                href="{{ nav_url }}"
                {% if is_current %}data-active{% endif %}
                {% if tab.pinned %}draggable="true" data-slug="{{ view_slug }}"{% else %}data-recent{% endif %}
                class="admin-nav-tab flex items-center gap-1.5 px-3 py-3 text-sm whitespace-nowrap text-admin-muted-foreground hover:text-admin-foreground border-b-2 border-transparent hover:border-admin-border data-[active]:text-admin-foreground data-[active]:font-medium data-[active]:border-admin-primary data-[recent]:text-admin-muted-foreground/80 data-[recent]:font-normal data-[recent]:italic"
            >{% if tab.view.nav_icon %}<admin.Icon name={tab.view.nav_icon} class="opacity-60" />{% endif %}{{ tab.view.get_nav_title() }}</a>
            {% endfor %}
        </div>

        <!-- Menu (Basecoat popover): full app/packages nav with a filter
             input. popover.js handles open/close, click-outside, ESC. -->
        <div class="admin-popover relative z-10 ml-auto">
            <button
                type="button"
                aria-haspopup="dialog"
                aria-expanded="false"
                aria-controls="admin-menu-popover"
                class="admin-btn admin-btn-sm admin-btn-ghost text-admin-muted-foreground"
            >
                <admin.Icon name="grid-3x3-gap" />
                <span class="hidden sm:inline">Menu</span>
            </button>
            <div
                id="admin-menu-popover"
                data-popover
                data-align="end"
                aria-hidden="true"
                class="w-80 max-h-[75vh] flex flex-col p-0! overflow-hidden!"
            >
                <div class="p-3 bg-admin-muted/40 border-b border-admin-border">
                    <admin.SearchInput
                        id="menu-filter-input"
                        placeholder="Filter pages..."
                        class="w-full pl-8 pr-3 py-2 text-base sm:text-sm bg-admin-background border border-admin-input rounded-admin-lg focus:outline-none focus:ring-2 focus:ring-admin-ring/30 focus:border-admin-ring placeholder:text-admin-muted-foreground transition-shadow"
                        />
                </div>

                <div class="overflow-auto flex-1 py-2 px-1.5" id="menu-items-container">
                    {% with sections=admin_registry.get_nav_sections(plain_packages=False, user=user), header_label="App" %}
                        {% include "admin/_menu_section.html" %}
                    {% endwith %}

                    {% with sections=admin_registry.get_nav_sections(plain_packages=True, user=user), header_label="Packages" %}
                        {% include "admin/_menu_section.html" %}
                    {% endwith %}
                </div>
            </div>
        </div>
    </nav>
</header>