<flux:header class="bg-white border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16 items-center">
            <flux:navbar class="hidden sm:flex space-x-8 sm:ms-10">
                <flux:navbar.item :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
                    {{ __('Dashboard') }}
                </flux:navbar.item>
            </flux:navbar>

            <flux:spacer />

            <div class="hidden sm:flex sm:items-center sm:ms-6">
                <flux:dropdown position="bottom" align="end">
                    <flux:profile :label="session('user_name', 'User')" icon-trailing="chevron-down" />
                    <flux:menu class="w-48">
                        <flux:menu.item :href="route('profile.edit')" wire:navigate>
                            {{ __('Profile') }}
                        </flux:menu.item>

                        <flux:menu.separator />

                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <flux:menu.item as="button" type="submit" class="w-full justify-start">
                                {{ __('Log Out') }}
                            </flux:menu.item>
                        </form>
                    </flux:menu>
                </flux:dropdown>
            </div>

            <div class="flex items-center sm:hidden">
                <flux:dropdown position="bottom" align="end">
                    <flux:profile :label="session('user_name', 'User')" icon-trailing="chevron-down" />
                    <flux:menu class="w-48">
                        <flux:menu.item :href="route('dashboard')" :active="request()->routeIs('dashboard')" wire:navigate>
                            {{ __('Dashboard') }}
                        </flux:menu.item>
                        <flux:menu.separator />
                        <flux:menu.item :href="route('profile.edit')" wire:navigate>
                            {{ __('Profile') }}
                        </flux:menu.item>
                        <flux:menu.separator />
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <flux:menu.item as="button" type="submit" class="w-full justify-start">
                                {{ __('Log Out') }}
                            </flux:menu.item>
                        </form>
                    </flux:menu>
                </flux:dropdown>
            </div>
        </div>
    </div>
</flux:header>
