@props([
    'label' => null,
    'name',
    'id' => null,
    'options' => [],        // value => label
    'placeholder' => null,  // empty option text
    'required' => false,
    'hint' => null,
    'live' => false,
])

@php
    $id ??= str_replace('.', '-', $name);
    $invalid = $errors->has($name);
@endphp

<x-ui.field :label="$label" :for="$id" :name="$name" :required="$required" :hint="$hint" {{ $attributes->only('class') }}>
    <select
        id="{{ $id }}"
        @if ($live) wire:model.live="{{ $name }}" @else wire:model="{{ $name }}" @endif
        @if ($required) required aria-required="true" @endif
        aria-invalid="{{ $invalid ? 'true' : 'false' }}"
        @if ($invalid) aria-describedby="{{ $id }}-error" @elseif ($hint) aria-describedby="{{ $id }}-hint" @endif
        {{ $attributes->except('class')->class(['form-control']) }}
    >
        @if ($placeholder !== null)
            <option value="">{{ $placeholder }}</option>
        @endif
        @foreach ($options as $value => $text)
            <option value="{{ $value }}">{{ $text }}</option>
        @endforeach
        {{ $slot }}
    </select>
</x-ui.field>