@if ($user = auth()->user())
    <div class="hidden lg:block">
        <x-dropdown right>
            <x-slot:trigger>
                @php
                    $avatarSrc = $user->avatar
                        ? asset('storage/' . $user->avatar)
                        : null;
                @endphp
                @if ($avatarSrc)
                    <button type="button" class="btn btn-circle btn-ghost p-0 focus:outline-none">
                        <div class="w-10 h-10 lg:w-10 lg:h-10 rounded-full overflow-hidden border-2 border-gray-200 flex-shrink-0">
                            <img src="{{ $avatarSrc }}" class="w-full h-full object-cover" alt="Avatar" />
                        </div>
                    </button>
                @else
                    <x-button icon="o-user" class="btn-circle" />
                @endif
            </x-slot:trigger>

            {{-- Información del usuario --}}
            <div class="px-4 py-3 border-b border-base-content/10">
                <div class="font-medium text-sm">{{ $user->name }}</div>
                <div class="text-xs text-base-content/70">{{ $user->email }}</div>
            </div>

            <x-menu-item title="Mi Perfil" icon="o-identification" link="{{ route('profile.edit') }}" />
            <x-menu-item title="Contraseña" icon="o-key" link="{{ route('settings.password') }}" />
            <x-menu-item title="Apariencia" icon="o-paint-brush" link="{{ route('settings.appearance') }}" />
            <hr class="my-1 border-t border-base-content/10" />
            <div x-data="{ 
                submitLogout() { 
                    this.$refs.logoutForm.submit(); 
                } 
            }">
                <form x-ref="logoutForm" method="POST" action="{{ route('logout') }}" class="inline w-full">
                    @csrf
                    <x-menu-item title="Cerrar sesión" icon="o-power" @click="submitLogout()" />
                </form>
            </div>
        </x-dropdown>
    </div>
@endif