@props([
    'name'        => 'search',
    'value'       => '',
    'placeholder' => 'Search…',
    'suggestUrl',
])

<div class="relative flex-1 min-w-48" x-data="searchTypeahead('{{ $suggestUrl }}')">
    <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
    </svg>
    <input x-ref="input" name="{{ $name }}" value="{{ $value }}" type="text"
           placeholder="{{ $placeholder }}"
           autocomplete="off"
           x-model="q"
           @input="onInput()"
           @keydown="onKeydown($event)"
           @focus="if (results.length) open = true"
           {{ $attributes->merge(['class' => 'block w-full rounded-xl border border-gray-200 pl-9 pr-3 py-2.5 text-sm placeholder-gray-400 focus:border-orange-500 focus:outline-none focus:ring-1 focus:ring-orange-500 transition-colors']) }}/>

    <div x-show="open" x-cloak @click.outside="open = false"
         class="absolute z-20 mt-1 w-full rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden max-h-72 overflow-y-auto">
        <template x-for="(item, i) in results" :key="item.id">
            <button type="button" @click="select(item)"
                :class="i === activeIndex ? 'bg-orange-50' : ''"
                class="flex w-full flex-col items-start gap-0.5 px-4 py-2.5 text-left text-sm hover:bg-orange-50 transition-colors">
                <span class="font-medium text-gray-900" x-text="item.title"></span>
                <span class="text-xs text-gray-400" x-text="item.subtitle" x-show="item.subtitle"></span>
            </button>
        </template>
    </div>
</div>