{{--
    Select field — same concept as content-media/_select:
    placeholder, own chevron, error border, and optional first option auto-selected.

    Parameters: $name, $label, $options, $selected, $placeholder, $required, $firstWhenEmpty
--}}
@php
    $hasError = $errors->has($name);
    $current = (string) ($selected ?? '');
    $firstWhenEmpty = $firstWhenEmpty ?? false;
@endphp
<div @if(! empty($id)) id="{{ $id }}" @endif>
    <label class="{{ $labelClass }}" for="{{ $name }}">
        {{ $label }}<span class="text-error-500 @if (empty($required)) hidden @endif" data-required-mark>*</span>
    </label>

    <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
        <select name="{{ $name }}" id="{{ $name }}"
            class="{{ $selectClass }} bg-none pr-11 {{ $hasError ? $errorClass : $normalClass }}"
            :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
            @change="isOptionSelected = true">
            <option value="" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">{{ $placeholder }}</option>
            @foreach ($options as $code => $descr)
                <option value="{{ $code }}" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
                    @selected($current === (string) $code || ($current === '' && $firstWhenEmpty && $loop->first))>
                    {{ $descr }}
                </option>
            @endforeach
        </select>

        <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
            <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </span>
    </div>

    @error($name)
        <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
    @enderror
</div>