@props(['current', 'memberships'])
{{-- Selector de espacio de trabajo. El cambio se envía por POST y el servidor comprueba la pertenencia. --}}
<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 max-w-[16rem] items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-left text-sm shadow-xs hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">
        <x-icon :name="$current->isPersonal() ? 'user' : 'building'" class="size-4 shrink-0 text-slate-400" />
        <span class="min-w-0">
            <span class="sr-only">{{ __('Espacio de trabajo activo:') }}</span>
            <span class="block truncate font-medium text-slate-900">{{ $current->isPersonal() ? __('Mi espacio personal') : $current->displayName() }}</span>
        </span>
        <x-icon name="chevron-up-down" class="size-4 shrink-0 text-slate-400" />
    </button>

    <div x-show="open" x-cloak x-transition.origin.top.left
        class="absolute left-0 z-40 mt-2 w-72 rounded-xl border border-slate-200 bg-white p-1.5 shadow-lg">
        <p class="px-3 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-slate-400">{{ __('Tus espacios de trabajo') }}</p>
        <ul class="max-h-72 overflow-y-auto">
            @foreach ($memberships as $membership)
                @php($ws = $membership->workspace)
                <li>
                    <form method="POST" action="{{ route('workspace.switch') }}">
                        @csrf
                        <input type="hidden" name="workspace" value="{{ $ws->ulid }}">
                        <button type="submit" class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-50 {{ $ws->is($current) ? 'bg-slate-50' : '' }}">
                            <x-icon :name="$ws->isPersonal() ? 'user' : 'building'" class="size-4 shrink-0 text-slate-400" />
                            <span class="min-w-0 flex-1">
                                <span class="block truncate font-medium text-slate-900">{{ $ws->isPersonal() ? __('Mi espacio personal') : $ws->displayName() }}</span>
                                <span class="block text-xs text-slate-500">{{ $ws->isPersonal() ? __('Personal') : $membership->role->label() }}</span>
                            </span>
                            @if ($ws->is($current))
                                <x-icon name="check" class="size-4 shrink-0 text-indigo-600" />
                                <span class="sr-only">{{ __('(activo)') }}</span>
                            @endif
                        </button>
                    </form>
                </li>
            @endforeach
        </ul>
        <div class="mt-1 border-t border-slate-100 pt-1">
            <a href="{{ route('organizations.create') }}" class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-indigo-700 hover:bg-indigo-50">
                <x-icon name="plus" class="size-4" /> {{ __('Crear organización') }}
            </a>
        </div>
    </div>
</div>