@php
    $fieldName = $name ?? $id;
    $labelFor = $labelFor ?? "{$id}_trigger";
    $selectedValue = (string) ($selected ?? '');
@endphp

@if (!empty($label))
    <label id="{{ $id }}_label" for="{{ $labelFor }}" class="label block mb-2" style="color: var(--color-ink-70);">{{ $label }}</label>
@endif

<div class="searchable-combobox" data-searchable-combobox>
    <select
        id="{{ $id }}"
        name="{{ $fieldName }}"
        tabindex="-1"
        aria-hidden="true"
        @if (!empty($required)) required @endif
    >
        @if (!empty($emptyOption))
            <option
                value="{{ $emptyOption['value'] ?? '' }}"
                @selected($selectedValue === (string) ($emptyOption['value'] ?? ''))
                @foreach ($emptyOption['attrs'] ?? [] as $attrKey => $attrValue)
                    {{ $attrKey }}="{{ $attrValue }}"
                @endforeach
            >{{ $emptyOption['label'] ?? '' }}</option>
        @endif
        @foreach ($options as $option)
            <option
                value="{{ $option['value'] }}"
                @selected($selectedValue === (string) $option['value'])
                @foreach ($option['attrs'] ?? [] as $attrKey => $attrValue)
                    {{ $attrKey }}="{{ $attrValue }}"
                @endforeach
            >{{ $option['label'] }}</option>
        @endforeach
    </select>
    <div class="searchable-combobox__field">
        <button
            type="button"
            id="{{ $id }}_trigger"
            class="searchable-combobox__trigger"
            aria-haspopup="listbox"
            aria-expanded="false"
            @if (!empty($label)) aria-labelledby="{{ $id }}_label" @endif
        >
            <span data-combobox-label>{{ $placeholder }}</span>
        </button>
        <input
            type="text"
            id="{{ $id }}_search"
            class="searchable-combobox__search"
            placeholder="{{ $searchPlaceholder ?? 'Search…' }}"
            autocomplete="off"
            aria-label="{{ $searchAriaLabel ?? 'Search options' }}"
        >
        <div class="searchable-combobox__menu">
            <ul class="searchable-combobox__list" role="listbox" @if (!empty($label)) aria-labelledby="{{ $id }}_label" @endif>
                @if (!empty($emptyOption))
                    <li
                        class="searchable-combobox__option"
                        role="option"
                        data-value="{{ $emptyOption['value'] ?? '' }}"
                        data-search="{{ $emptyOption['search'] ?? strtolower($emptyOption['label'] ?? '') }}"
                        @foreach ($emptyOption['attrs'] ?? [] as $attrKey => $attrValue)
                            {{ $attrKey }}="{{ $attrValue }}"
                        @endforeach
                    >{{ $emptyOption['label'] ?? '' }}</li>
                @endif
                @foreach ($options as $option)
                    <li
                        class="searchable-combobox__option"
                        role="option"
                        data-value="{{ $option['value'] }}"
                        data-search="{{ $option['search'] ?? strtolower($option['label']) }}"
                        @foreach ($option['attrs'] ?? [] as $attrKey => $attrValue)
                            {{ $attrKey }}="{{ $attrValue }}"
                        @endforeach
                    >{{ $option['label'] }}</li>
                @endforeach
            </ul>
            <p class="searchable-combobox__empty">{{ $emptyResultsText ?? 'No matches found.' }}</p>
        </div>
    </div>
</div>