@props(['model' => 'search', 'placeholder' => 'Search...', 'label' => 'Search'])
<div {{ $attributes->merge(['class' => 'relative']) }}>
    <label for="search-{{ $model }}" class="sr-only">{{ $label }}</label>
    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
        <x-icon name="magnifying-glass" class="size-4" />
    </span>
    <input id="search-{{ $model }}" type="search" wire:model.live.debounce.400ms="{{ $model }}" placeholder="{{ $placeholder }}"
           autocomplete="off" maxlength="100" class="form-control pl-9 pr-9">
    <span wire:loading.flex wire:target="{{ $model }}" class="absolute inset-y-0 right-0 hidden items-center pr-3 text-slate-400">
        <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
        <span class="sr-only">Searching</span>
    </span>
</div>