<!-- Admin Header Component -->
<header class="admin-header" role="banner">
    <!-- Page Title (hidden on mobile, breadcrumbs shown instead) -->
    <h1 class="admin-header__title">{page_title}</h1>

    <!-- Breadcrumbs (visible on mobile) -->
    <if condition="breadcrumbs">
        <include template="components/breadcrumbs" data="{breadcrumbs: breadcrumbs}" />
    </if>

    <!-- Search Bar -->
    <div class="admin-header__search">
        <form class="admin-search" role="search" action="/admin/search" method="get">
            <svg class="admin-search__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <input
                type="search"
                name="q"
                class="admin-search__input"
                placeholder="Search..."
                aria-label="Search"
                autocomplete="off"
            />
        </form>
    </div>

    <!-- Header Actions -->
    <div class="admin-header__actions">
        <!-- Notifications -->
        <button
            type="button"
            class="admin-action-btn"
            aria-label="Notifications"
            data-dropdown-trigger="notifications"
        >
            <svg class="admin-action-btn__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
            <if condition="notification_count > 0">
                <span class="admin-action-btn__badge admin-action-btn__badge--count" aria-label="{notification_count} unread notifications">
                    {notification_count}
                </span>
            </if>
        </button>

        <!-- Theme Toggle -->
        <button
            type="button"
            class="admin-theme-toggle"
            aria-label="Toggle theme"
            data-theme-toggle
        >
            <svg class="admin-theme-toggle__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-theme-icon="light">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
            </svg>
            <svg class="admin-theme-toggle__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true" data-theme-icon="dark" style="display: none;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
            </svg>
            <span class="admin-theme-toggle__label">Theme</span>
        </button>

        <!-- User Menu -->
        <div class="admin-user-menu" data-dropdown="user-menu">
            <button
                type="button"
                class="admin-user-menu__trigger"
                aria-label="User menu"
                aria-expanded="false"
                aria-haspopup="true"
                data-dropdown-trigger="user-menu"
            >
                <img
                    src="{user.avatar ?? '/assets/default-avatar.png'}"
                    alt="{user.name}"
                    class="admin-user-menu__avatar"
                    width="32"
                    height="32"
                />
                <span class="admin-user-menu__name">{user.name}</span>
                <svg class="admin-user-menu__chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>

            <ul class="admin-user-menu__dropdown" role="menu" aria-labelledby="user-menu" data-dropdown-content="user-menu">
                <li class="admin-user-menu__item" role="none">
                    <a href="/admin/profile" class="admin-user-menu__link" role="menuitem">
                        <svg class="admin-user-menu__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                        </svg>
                        <span>Profile</span>
                    </a>
                </li>
                <li class="admin-user-menu__item" role="none">
                    <a href="/admin/settings" class="admin-user-menu__link" role="menuitem">
                        <svg class="admin-user-menu__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        <span>Settings</span>
                    </a>
                </li>
                <li role="none">
                    <hr class="admin-user-menu__divider" />
                </li>
                <li class="admin-user-menu__item" role="none">
                    <a href="/logout" class="admin-user-menu__link" role="menuitem">
                        <svg class="admin-user-menu__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
                        </svg>
                        <span>Logout</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</header>
