@props(['user'])
<div class="relative" x-data="{ open: false }" x-on:click.outside="open = false" x-on:keydown.escape="open = false">
    <button type="button" x-on:click="open = !open" x-bind:aria-expanded="open" aria-haspopup="true"
        class="flex items-center gap-2 rounded-full p-0.5 pr-2 text-sm hover:bg-slate-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
        <span class="flex size-8 items-center justify-center rounded-full bg-indigo-600 text-xs font-semibold uppercase text-white" aria-hidden="true">
            {{ mb_substr($user->name, 0, 1) }}{{ mb_substr((string) $user->last_name, 0, 1) }}
        </span>
        <span class="hidden max-w-[10rem] truncate font-medium text-slate-700 md:block">{{ $user->name }}</span>
        <span class="sr-only">{{ __('Menú de usuario') }}</span>
        <x-icon name="chevron-down" class="hidden size-4 text-slate-400 md:block" />
    </button>
    <div x-show="open" x-cloak x-transition.origin.top.right class="absolute right-0 z-40 mt-2 w-60 rounded-xl border border-slate-200 bg-white p-1.5 shadow-lg">
        <div class="px-3 py-2">
            <p class="truncate text-sm font-medium text-slate-900">{{ $user->full_name }}</p>
            <p class="truncate text-xs text-slate-500">{{ $user->email }}</p>
        </div>
        <div class="border-t border-slate-100 pt-1">
            <a href="{{ route('profile.edit') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">
                <x-icon name="user" class="size-4 text-slate-400" /> {{ __('Mi perfil') }}
            </a>
            @can('platform-admin')
                <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-700 hover:bg-slate-50">
                    <x-icon name="shield" class="size-4 text-slate-400" /> {{ __('Administración') }}
                </a>
            @endcan
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-slate-700 hover:bg-slate-50">
                    <x-icon name="logout" class="size-4 text-slate-400" /> {{ __('Cerrar sesión') }}
                </button>
            </form>
        </div>
    </div>
</div>