{{-- Poll so the active + fleet status dots reflect a server going up/down live (Livewire morph keeps
     the Alpine `open` dropdown state across re-renders). --}}
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape="open = false" class="relative" wire:poll.10s>
    <button type="button" @click="open = ! open"
            class="flex min-h-11 w-full items-center gap-2.5 rounded-md border border-line bg-inset px-3 py-2 text-left transition-colors hover:border-line-strong"
            :aria-expanded="open" aria-haspopup="listbox">
        @if ($active)
            <x-status-dot :status="$active->status" :ping="$active->status === 'online'" />
            <span class="min-w-0 flex-1">
                <span class="block truncate font-mono text-sm text-ink">{{ $active->name }}</span>
                <span class="block truncate font-mono text-[11px] text-ink-3">{{ $active->ip }}</span>
            </span>
        @else
            <span class="min-w-0 flex-1 text-sm text-ink-3">{{ __('servers.switcher_no_server') }}</span>
        @endif
        <x-icon name="switcher" class="h-4 w-4 shrink-0 text-ink-3" />
    </button>

    <div x-show="open" x-cloak x-transition.origin.top
         class="absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-md border border-line bg-raised shadow-pop"
         role="listbox">
        <div class="max-h-72 overflow-y-auto p-1">
            @forelse ($servers as $server)
                <button type="button" wire:click="select('{{ $server->uuid }}')" @click="open = false"
                        @class([
                            'flex min-h-11 w-full items-center gap-2.5 rounded-sm px-2.5 py-1.5 text-left transition-colors hover:bg-surface',
                            'bg-accent/10' => $active && $server->id === $active->id,
                        ])
                        role="option" :aria-selected="{{ $active && $server->id === $active->id ? 'true' : 'false' }}">
                    <x-status-dot :status="$server->status" :ping="$server->status === 'online'" />
                    <span class="min-w-0 flex-1">
                        <span class="block truncate font-mono text-sm text-ink">{{ $server->name }}</span>
                        <span class="block truncate font-mono text-[11px] text-ink-3">{{ $server->ip }} · {{ $server->os }}</span>
                    </span>
                    @if ($active && $server->id === $active->id)
                        <x-icon name="activity" class="h-3.5 w-3.5 shrink-0 text-accent" />
                    @endif
                </button>
            @empty
                {{-- Empty fleet: explain the state + offer the add-server action instead of a bare panel.
                     The @click on the WRAPPER (bubbling) closes the dropdown — never on x-modal-trigger
                     itself, a caller x-on:click would override its internal open() handler. --}}
                <div class="px-2.5 py-4 text-center">
                    <x-icon name="server" class="mx-auto h-5 w-5 text-ink-4" />
                    <p class="mt-2 text-sm text-ink-2">{{ __('servers.switcher_empty_title') }}</p>
                    <p class="mt-0.5 font-mono text-[11px] text-ink-4">{{ __('servers.switcher_empty_hint') }}</p>
                    @can('manage-fleet')
                        <div class="mt-3 flex justify-center" @click="open = false">
                            <x-modal-trigger variant="accent" component="modals.create-server">
                                <x-icon name="plus" class="h-3.5 w-3.5" />
                                {{ __('servers.add_server') }}
                            </x-modal-trigger>
                        </div>
                    @endcan
                </div>
            @endforelse
        </div>
    </div>
</div>