{{-- 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">
            @foreach ($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>
            @endforeach
        </div>
    </div>
</div>