<!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">
        <flux:sidebar sticky collapsible="mobile" class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
            <flux:sidebar.header>
                <x-app-logo :sidebar="true" href="{{ route('dashboard') }}" wire:navigate />
                <flux:sidebar.collapse class="lg:hidden" />
            </flux:sidebar.header>

            <flux:sidebar.nav>
                {{--
                <flux:sidebar.group :heading="__('Main Menu')" class="grid">
                    <flux:navlist variant="outline">
                        <flux:navlist.group class="grid mb-2">
                            <flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard*')" wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
                            <flux:navlist.item icon="photo" :href="route('sliders.index')" :current="request()->routeIs('sliders*')" wire:navigate>{{ __('Sliders Homepage') }}</flux:navlist.item>
                            <flux:navlist.item icon="photo" :href="route('gallerycategories.index')" :current="request()->routeIs('gallerycategories*') || request()->routeIs('galleries*')" wire:navigate>{{ __('Galleries') }}</flux:navlist.item>
                            <!--<flux:navlist.item icon="photo" :href="route('galleries.index')" :current="request()->routeIs('galleries*')" wire:navigate>{{ __('Galleries') }}</flux:navlist.item>-->
                            <flux:navlist.item icon="map" :href="route('provinces.index')" :current="request()->routeIs('provinces*')" wire:navigate>{{ __('Provinces') }}</flux:navlist.item>
                            <flux:navlist.item icon="users" :href="route('users.index')" :current="request()->routeIs('users*')" wire:navigate>{{ __('Users') }}</flux:navlist.item>
                        </flux:navlist.group>
                    </flux:sidebar.group>
                </flux:sidebar.nav>
                --}}

                <flux:sidebar.group :heading="__('Website Content')" class="grid">
                    <flux:navlist variant="outline">
                        <flux:navlist.group class="grid">
                                <flux:navlist.item
                                    href="{{ route('contents.homepage') }}"
                                    icon="document">
                                    Homepage
                                </flux:navlist.item>
                                <flux:navlist.item
                                    href="{{ route('contents.pages.index') }}"
                                    icon="document">
                                    Page
                                </flux:navlist.item>
                        </flux:navlist.group>
                    </flux:navlist>

                </flux:sidebar.group>
            </flux:sidebar.nav>

            <flux:spacer />

            <x-desktop-user-menu class="hidden lg:block" :name="auth()->user()->name" />
        </flux:sidebar>


        <!-- Mobile User Menu -->
        <flux:header class="lg:hidden">
            <flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />

            <flux:spacer />

            <flux:dropdown position="top" align="end">
                <flux:profile
                    :initials="auth()->user()->initials()"
                    icon-trailing="chevron-down"
                />

                <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-start text-sm">
                                <flux:avatar
                                    :name="auth()->user()->name"
                                    :initials="auth()->user()->initials()"
                                />

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

                    <flux:menu.separator />

                    <flux:menu.radio.group>
                        <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
                            {{ __('Settings') }}
                        </flux:menu.item>
                    </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 cursor-pointer"
                            data-test="logout-button"
                        >
                            {{ __('Log Out') }}
                        </flux:menu.item>
                    </form>
                </flux:menu>
            </flux:dropdown>
        </flux:header>

        {{ $slot }}

        @fluxScripts
    </body>
</html>
