@props(['name','label','options','value'=>'','required'=>false,'placeholder'=>'Select an option'])
@php($choiceId='compact-'.str_replace(['[',']','_'],['-','','-'],$name))
<div class="compact-select" data-compact-select>
    <label for="{{ $choiceId }}">{{ $label }}</label>
    <select id="{{ $choiceId }}" name="{{ $name }}" @required($required) {{ $attributes }} data-compact-native><option value="">{{ $placeholder }}</option>@foreach($options as $key=>$text)<option value="{{ $key }}" @selected((string)$value===(string)$key)>{{ $text }}</option>@endforeach</select>
    <details data-compact-picker hidden>
        <summary aria-label="{{ $label }}" aria-controls="{{ $choiceId }}-options"><span data-compact-value>{{ $placeholder }}</span><x-icon name="chevron-down"/></summary>
        <div class="compact-select-popover">
            <label class="compact-select-search">Search {{ strtolower($label) }}<input type="search" data-compact-search autocomplete="off" placeholder="Search by name or code" aria-controls="{{ $choiceId }}-options"></label>
            <div class="compact-select-options" id="{{ $choiceId }}-options">@unless($required)<button type="button" data-compact-option data-value="">{{ $placeholder }}</button>@endunless @foreach($options as $key=>$text)<button type="button" data-compact-option data-value="{{ $key }}">{{ $text }}</button>@endforeach</div>
            <p data-compact-empty hidden>No matching options.</p>
        </div>
    </details>
</div>