<header class="setel-header-bar hidden lg:flex" aria-label="Barra superior">
    <label
        for="setel-sidebar-rail"
        class="setel-sidebar-rail-trigger me-2 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent text-[var(--setel-text-muted)] hover:bg-[var(--setel-content-bg)] hover:text-[var(--setel-text)]"
        title="Contraer o expandir menú lateral"
    >
        <flux:icon.chevron-left class="setel-sidebar-rail-trigger__icon size-5 transition-transform duration-200" />
        <span class="sr-only">Contraer o expandir menú lateral</span>
    </label>

    <nav aria-label="Migas de pan" class="flex min-w-0 flex-1 items-center gap-2 text-sm text-[var(--setel-text-muted)]">
        <a href="{{ route('dashboard') }}" class="hover:text-[var(--setel-primary)]" wire:navigate>Inicio</a>
        <span aria-hidden="true">/</span>
        <span class="truncate font-semibold text-[var(--setel-text)]">{{ $header ?? 'Panel' }}</span>
    </nav>

    <div class="flex shrink-0 items-center gap-3">
        <flux:radio.group x-data variant="segmented" x-model="$flux.appearance" class="shrink-0">
            <flux:radio value="light" icon="sun" />
            <flux:radio value="dark" icon="moon" />
        </flux:radio.group>

        <flux:dropdown position="bottom" align="end">
            <button
                type="button"
                class="flex items-center gap-2 rounded-lg border border-transparent px-2 py-1.5 hover:border-[var(--setel-card-border)] hover:bg-[var(--setel-content-bg)]"
            >
                <x-user-avatar :user="auth()->user()" size="sm" />
                <span class="hidden max-w-[10rem] flex-col items-start text-start text-sm leading-tight xl:flex">
                    <span class="truncate font-semibold text-[var(--setel-text)]">{{ auth()->user()->name }}</span>
                    <span class="truncate text-xs text-[var(--setel-text-muted)]">Operaciones</span>
                </span>
                <flux:icon.chevron-down class="size-4 text-[var(--setel-text-muted)]" />
            </button>

            <flux:menu>
                <div class="flex items-center gap-2 px-2 py-2">
                    <span class="setel-avatar">{{ auth()->user()->initials() }}</span>
                    <div class="min-w-0 text-start">
                        <p class="truncate text-sm font-semibold text-[var(--setel-text)]">{{ auth()->user()->name }}</p>
                        <p class="truncate text-xs text-[var(--setel-text-muted)]">{{ auth()->user()->email }}</p>
                    </div>
                </div>
                <flux:menu.separator />
                <flux:menu.item :href="route('profile.edit')" icon="user" wire:navigate>Perfil</flux:menu.item>
                <flux:menu.separator />
                <form method="POST" action="{{ route('logout') }}" class="w-full">
                    @csrf
                    <flux:menu.item
                        as="button"
                        type="submit"
                        icon="arrow-right-start-on-rectangle"
                        class="w-full cursor-pointer"
                    >
                        Cerrar Sesión
                    </flux:menu.item>
                </form>
            </flux:menu>
        </flux:dropdown>
    </div>
</header>
