@props(['title' => '', 'showSearch' => true])

@php
    $themeToggleClass = 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg border border-border/70 bg-background/50 px-2 py-2 text-sm font-medium text-foreground shadow-none backdrop-blur-sm transition-all duration-200 outline-none ring-0 hover:border-border hover:bg-background/70 hover:text-foreground active:bg-background/80 focus:outline-none focus:ring-0';
    $top = 'sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-border bg-card/95 px-4 backdrop-blur sm:px-6 dark:bg-card/95';
    $search = 'block w-full rounded-lg border-0 bg-muted py-2 ps-9 pe-4 text-sm text-foreground shadow-sm ring-1 ring-transparent transition-colors placeholder:text-muted-foreground focus:bg-card focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:focus:bg-muted/80';
@endphp

<header class="{{ $top }}">
    <button
        type="button"
        @click="$store.sidebar.toggleMobile()"
        class="-ms-2 rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background lg:hidden"
        aria-label="Open sidebar"
    >
        <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
    </button>

    <div class="ms-auto flex items-center gap-2">
        <x-common.lang-toggle
            :class="$themeToggleClass"
            ::class="scrolled ? '@js($themeToggleBlurClass)' : ''"
        />
    
        <x-common.theme-toggle class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background" aria-label="Toggle theme" />

        <x-common.auth.user-dropdown
        guard="admin"
        :menuItems="config('admin-nav.dropdown-items')"
        :logoutRoute="route('admin.logout')"
        />
    </div>
</header>