@props(['placeholder' => 'Search…', 'model' => 'search'])

<div class="relative flex-1 sm:max-w-xs">
    <x-ui.icon name="search" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />

    <input
        type="search"
        wire:model.live.debounce.400ms="{{ $model }}"
        placeholder="{{ $placeholder }}"
        data-scanner-passthrough="1"
        {{ $attributes->merge(['class' => 'field-input pl-9']) }}
    >

    <div wire:loading wire:target="{{ $model }}"
         class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400">
        <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="3" class="opacity-25" />
            <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
        </svg>
    </div>
</div>