<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
    @include('partials.head')
</head>
<body class="min-h-screen bg-white dark:bg-zinc-800">

<!-- Desktop Header Menu -->
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
    <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left"/>

    <a href="{{ route('dashboard') }}" wire:navigate class="ml-2 mr-5 flex items-center space-x-2 lg:ml-0">
        <x-app-logo class="size-8" href="#"></x-app-logo>
    </a>

    <flux:navbar class="-mb-px max-lg:hidden">
        <flux:navbar.item icon="layout-grid" href="{{ route('dashboard') }}" wire:navigate
                          :current="request()->routeIs('dashboard')">
            Dashboard
        </flux:navbar.item>
        <flux:navbar.item icon="trmnl" href="{{ route('devices') }}" wire:navigate
                          :current="request()->routeIs(['devices', 'devices.configure'])">
            Devices
        </flux:navbar.item>
        <flux:navbar.item icon="puzzle-piece" href="{{ route('plugins.index') }}" wire:navigate
                          :current="request()->routeIs(['plugins.index', 'plugins.markup', 'plugins.api', 'plugins.recipe'])">
            Plugins &amp; Recipes
        </flux:navbar.item>
        <flux:navbar.item icon="play" href="{{ route('playlists.index') }}" wire:navigate
                          :current="request()->routeIs('playlists.index')">
            Playlists
        </flux:navbar.item>
    </flux:navbar>

    <flux:spacer/>

    <flux:navbar class="mr-1.5 space-x-0.5 py-0! max-lg:hidden">
        <livewire:actions.device-auto-join/>
    </flux:navbar>

    <!-- Desktop User Menu -->
    <flux:dropdown position="top" align="end">
        <flux:profile
            class="cursor-pointer"
            :initials="auth()->user()->initials()"
        />

        <flux:menu>
            <flux:menu.radio.group>
                <div class="p-0 text-sm font-normal">
                    <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
                                <span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
                                    <span
                                        class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
                                    >
                                        {{ auth()->user()->initials() }}
                                    </span>
                                </span>

                        <div class="grid flex-1 text-left text-sm leading-tight">
                            <span class="truncate font-semibold">{{ auth()->user()->name }}</span>
                            <span class="truncate text-xs">{{ auth()->user()->email }}</span>
                        </div>
                    </div>
                </div>
            </flux:menu.radio.group>

            <flux:menu.separator/>

            <flux:menu.radio.group>
                <flux:menu.item href="{{ route('settings.preferences') }}" wire:navigate icon="cog">Settings</flux:menu.item>
                <flux:menu.item href="{{ route('settings.support') }}" wire:navigate icon="heart">Support</flux:menu.item>
                @if(config('app.version'))
                    <flux:menu.item href="{{ route('settings.update') }}" wire:navigate icon="arrow-down-circle">
                        <div class="flex items-center gap-2">
                            <span>Updates</span>
                            <livewire:update-badge />
                        </div>
                    </flux:menu.item>
                @endif
            </flux:menu.radio.group>

            <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">
                    {{ __('Log Out') }}
                </flux:menu.item>
            </form>
        </flux:menu>
    </flux:dropdown>
</flux:header>

<!-- Mobile Menu -->
<flux:sidebar stashable sticky
              class="lg:hidden border-r border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
    <flux:sidebar.toggle class="lg:hidden" icon="x-mark"/>

    <a href="{{ route('dashboard') }}" wire:navigate class="ml-1 flex items-center space-x-2">
        <x-app-logo class="size-8" href="#"></x-app-logo>
    </a>

    <flux:navlist variant="outline">
        <flux:navlist.group heading="Menu">
            <flux:navlist.item icon="layout-grid" href="{{ route('dashboard') }}" wire:navigate
                               :current="request()->routeIs('dashboard')" class="m-2">
                Dashboard
            </flux:navlist.item>
            <flux:navlist.item icon="trmnl" href="{{ route('devices') }}" wire:navigate
                              :current="request()->routeIs('devices')" class="m-2">
                Devices
            </flux:navlist.item>
            <flux:navlist.item icon="puzzle-piece" href="{{ route('plugins.index') }}" wire:navigate
                              :current="request()->routeIs('plugins.index')" class="m-2">
                Plugins &amp; Recipes
            </flux:navlist.item>
            <flux:navlist.item icon="play" href="{{ route('playlists.index') }}" wire:navigate
                              :current="request()->routeIs('playlists.index')" class="m-2">
                Playlists
            </flux:navlist.item>
        </flux:navlist.group>
    </flux:navlist>

    <flux:spacer/>

    <flux:navlist variant="outline">
        <livewire:actions.device-auto-join/>
    </flux:navlist>
</flux:sidebar>

{{ $slot }}

@fluxScripts
</body>
</html>
