@props(['name', 'label' => null, 'options' => [], 'value' => null, 'placeholder' => null, 'hint' => null, 'creatable' => false, 'source' => null, 'optionSets' => []])
{{-- <x-admin.select> with a search box, for long lists such as every country. The choice posts through a hidden input;
     arrow keys move, Enter picks, Escape closes. A placeholder prompts a required field; otherwise it's an empty first choice. --}}
{{-- [creatable] also takes typed text that isn't listed. With a [source] (another searchable select's name), the options
     switch to [optionSets][its new value], e.g. a currency's symbols. --}}
@php($key = str_replace(['[', ']'], ['.', ''], $name)) {{-- errors and old input use dot keys --}}
@php($id = $attributes->get('id', $name))
@php($emptyChoice = $placeholder !== null && ! $attributes->get('required'))
@php($toChoices = fn ($set) => collect($set)->map(fn ($optionLabel, $optionValue) => ['value' => (string) $optionValue, 'label' => __($optionLabel)])->values())
@php($current = (string) old($key, $value))
@php($choices = $toChoices(collect($emptyChoice ? ['' => $placeholder] : [])->union($options)))
@php($choices = $creatable && $current !== '' && ! $choices->contains('value', $current) ? $choices->push(['value' => $current, 'label' => $current]) : $choices)
<div x-data="searchableSelect(@js($choices), @js($current), @js(['name' => $name, 'creatable' => $creatable, 'createLabel' => __('Use “:value”'), 'source' => $source, 'optionSets' => collect($optionSets)->map($toChoices)]))"
     @if ($source) x-on:searchable-select-change.window="sourceChanged($event.detail)" @endif
     @click.outside="close()" @keydown.escape="close(true)" class="relative">
    @if ($label)
        <label for="{{ $id }}" class="form-label">{{ $label }} @if ($attributes->get('required'))<span class="text-red-500">*</span>@endif</label>
    @endif
    <input type="hidden" name="{{ $name }}" :value="selected">
    <button type="button" id="{{ $id }}" x-ref="trigger" @click="toggle()" @keydown.arrow-down.prevent="openList()"
            role="combobox" aria-haspopup="listbox" aria-controls="{{ $id }}_options" :aria-expanded="open"
            @class(['form-control flex items-center justify-between gap-2 text-start', '!border-red-500' => $errors->has($key)])>
        <span class="truncate" :class="selectedLabel() === '' && 'text-gray-400'" x-text="selectedLabel() || @js((string) $placeholder)"></span>
        <x-heroicon-m-chevron-up-down class="size-4 shrink-0 text-gray-400" />
    </button>

    <div x-show="open" x-cloak class="absolute inset-x-0 z-20 mt-1 rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
        <div class="relative border-b border-gray-200 p-2 dark:border-gray-800">
            <x-heroicon-m-magnifying-glass class="pointer-events-none absolute start-5 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
            <input type="search" x-ref="search" x-model="query" @input="active = 0" placeholder="{{ __('Search') }}" aria-label="{{ __('Search') }} {{ $label }}"
                   @keydown.arrow-down.prevent="move(1)" @keydown.arrow-up.prevent="move(-1)" @keydown.enter.prevent="choose(matches()[active])" @keydown.tab="close()"
                   class="form-control ps-9">
        </div>
        <ul id="{{ $id }}_options" x-ref="list" role="listbox" class="relative max-h-64 overflow-y-auto py-1 text-sm">
            <template x-for="(option, index) in matches()" :key="option.value">
                <li role="option" :aria-selected="option.value === selected" @click="choose(option)" @mouseenter="active = index"
                    :class="index === active ? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100' : 'text-gray-700 dark:text-gray-300'"
                    class="flex cursor-pointer items-center justify-between gap-2 px-3 py-2">
                    <span x-text="option.label"></span>
                    <x-heroicon-m-check x-show="option.value === selected" class="size-4 shrink-0 text-brand-600" />
                </li>
            </template>
            <li x-show="matches().length === 0" class="px-3 py-2 text-gray-500 dark:text-gray-400">{{ __('No matches') }}</li>
        </ul>
    </div>

    @if ($hint)<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ $hint }}</p>@endif
    @error($key)<p class="form-error">{{ $message }}</p>@enderror
</div>