@php $locked = $locked ?? false; @endphp

@if($locked)
    <div class="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-200 rounded bg-gray-50 shrink-0 cursor-default select-none">
        <span class="font-medium text-gray-500">{{ $activeChannel?->name ?? 'No channel' }}</span>
        @if($activeChannel)
            <span class="text-xs text-gray-400">{{ $activeChannel->hostname }}</span>
        @endif
    </div>
@else
    <div x-data="{ open: false }" @click.outside="open = false" class="relative shrink-0">
        <button @click="open = !open" type="button"
                class="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-300 rounded bg-white hover:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <span class="font-medium text-gray-700">{{ $activeChannel?->name ?? 'Select channel' }}</span>
            @if($activeChannel)
                <span class="text-xs text-gray-400">{{ $activeChannel->hostname }}</span>
            @endif
            <svg class="w-3.5 h-3.5 text-gray-400 ml-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </button>

        <div x-show="open" x-transition style="display:none"
             class="absolute top-full left-0 mt-1 min-w-48 bg-white border border-gray-200 rounded shadow-lg z-50 py-1">
            @forelse($channels as $ch)
                <form method="POST" action="{{ route('admin.channel.activate') }}">
                    @csrf
                    <input type="hidden" name="channel_id" value="{{ $ch->id }}">
                    <button type="submit"
                            class="w-full text-left px-4 py-2 text-sm flex items-center justify-between gap-4 {{ $ch->id === $activeChannel?->id ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-700 hover:bg-gray-50' }}">
                        <span>{{ $ch->name }}</span>
                        <span class="text-xs text-gray-400 font-normal">{{ $ch->hostname }}</span>
                    </button>
                </form>
            @empty
                <div class="px-4 py-2 text-sm text-gray-400">No channels yet.</div>
            @endforelse
        </div>
    </div>
@endif