{{--
    The search field inside a filter bar.

        <x-filter.search :value="$filters['search']" placeholder="Name or email address" />

    Leading icon, no label — the placeholder and the magnifier together say what
    it is, and a label above it would break the single-row alignment that makes
    the toolbar read as one control rather than three.

    It grows to fill whatever the selects beside it leave over, so the search
    box is always the widest thing in the row. That is deliberate: it is the
    control people reach for first.
--}}
@props([
    'name' => 'search',
    'value' => null,
    'placeholder' => 'Search…',
    'label' => 'Search',
])

<div {{ $attributes->merge(['class' => 'ams-search']) }}>
    <label for="{{ $name }}" class="visually-hidden">{{ $label }}</label>

    <input type="search"
           class="form-control"
           id="{{ $name }}"
           name="{{ $name }}"
           value="{{ old($name, $value) }}"
           placeholder="{{ $placeholder }}"
           autocomplete="off">

    <i class="bi bi-search" aria-hidden="true"></i>
</div>
