{{--
    Free-text input with autocomplete from values already in the database.

        <x-form.datalist name="manufacturer" label="Manufacturer"
                         :options="$manufacturers" help="Start typing, or enter a new one." />

    This is how manufacturer, vendor, warranty provider and designation are
    captured. They are labels with no attributes of their own, so they are text
    columns rather than lookup tables — and a <datalist> gives the same
    autocomplete a dropdown would, using native HTML, with no table, no model,
    no controller and no "you can't delete this, it's in use" edge case.

    Unlike a select, the user can always type something new, which is exactly
    what is wanted the first time a new supplier appears.
--}}
@props([
    'name',
    'label' => null,
    'options' => [],
    'value' => null,
    'help' => null,
    'required' => false,
])

@php
    $id = $attributes->get('id', $name);
    $listId = $id.'-options';
    $hasError = $errors->has($name);
@endphp

<div class="ams-field">
    @if ($label)
        <label for="{{ $id }}" class="form-label">
            {{ $label }}@if ($required)<span class="ams-required" aria-hidden="true">*</span>@endif
        </label>
    @endif

    <input type="text"
           name="{{ $name }}"
           id="{{ $id }}"
           value="{{ old($name, $value) }}"
           list="{{ $listId }}"
           autocomplete="off"
           @if ($required) required @endif
           @if ($help) aria-describedby="{{ $id }}-help" @endif
           {{ $attributes->except('id')->merge(['class' => 'form-control'.($hasError ? ' is-invalid' : '')]) }}>

    <datalist id="{{ $listId }}">
        @foreach ($options as $option)
            <option value="{{ $option }}"></option>
        @endforeach
    </datalist>

    @if ($help)
        <div class="form-text" id="{{ $id }}-help">{{ $help }}</div>
    @endif

    @error($name)
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>
