@php
    $inputId = $inputId ?? 'live-index-search';
    $srLabel = $srLabel ?? 'Rechercher';
    $placeholder = $placeholder ?? 'Recherche en direct…';
@endphp
<div class="mb-4">
    <label for="{{ $inputId }}" class="sr-only">{{ $srLabel }}</label>
    <div class="relative max-w-xl">
        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400" aria-hidden="true">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="7"/>
                <path stroke-linecap="round" d="m20 20-3.5-3.5"/>
            </svg>
        </span>
        <input type="text"
               name="search"
               id="{{ $inputId }}"
               inputmode="search"
               x-model="q"
               placeholder="{{ $placeholder }}"
               autocomplete="off"
               class="w-full rounded-lg border border-slate-200 bg-slate-50/80 py-2.5 pl-10 pr-10 text-sm text-slate-900 placeholder:text-slate-400 focus:border-[#E83646] focus:bg-white focus:outline-none focus:ring-2 focus:ring-rose-200"
               @input.debounce.400ms="reloadSearch()">
        <button type="button"
                x-show="q.trim().length > 0"
                x-cloak
                @click="clearSearch()"
                class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-600"
                title="Effacer la recherche">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18"/>
            </svg>
        </button>
    </div>
</div>