<flux:header class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-700">
    <flux:sidebar.toggle class="lg:hidden" icon="bars-2" />
    <flux:brand logo="{{ asset('assets/images/logo.png') }}" name="Yadi Parfum" class="max-lg:hidden dark:hidden" />
    <flux:brand logo="{{ asset('assets/images/dark-logo.png') }}" name="Yadi Parfum"
        class="max-lg:hidden! hidden dark:flex" />
    <flux:spacer />
    <flux:navbar class="me-4">
        <flux:navbar.item icon="bell" label="Notifikasi" />
        <flux:navbar.item x-data x-on:click="$flux.dark = ! $flux.dark">
            <template x-if="$flux.dark">
                <div class="flex items-center gap-2">
                    <flux:icon name="sun" class="w-5 h-5" />
                </div>
            </template>

            <template x-if="!$flux.dark">
                <div class="flex items-center gap-2">
                    <flux:icon name="moon" class="w-5 h-5" />
                </div>
            </template>
        </flux:navbar.item>
    </flux:navbar>
    <flux:dropdown position="top" align="end">
        <flux:profile circle name="{{ auth()->user()?->employee?->full_name }}" />
        <flux:navmenu>
            <flux:navmenu.item href="{{ route('studio.setting.account', auth()->id()) }}" icon="cog"
                wire:navigate.hover>
                Pengaturan
            </flux:navmenu.item>
            <flux:menu.separator />
            @livewire('auth.logout')
        </flux:navmenu>
    </flux:dropdown>
</flux:header>
