@props(['targets' => [], 'key' => '', 'is_placed_on_modal'])
<div {{$attributes->merge(['class' =>  ""])}}>
    <div class="relative w-full">
        <input wire:model.defer="search_input" type="text"
               id="{{$key}}-searchbar"
               @keydown.f6.prevent.window="$el.focus();"
               @keydown.stop.enter="if (!event.isComposing) { $el.blur(); setFocus(); @this.executeFilter();}"
               class="block p-2 pr-16 text-sm text-gray-900 border border-gray-300 w-full rounded-lg bg-white placeholder:text-xs focus:ring-blue-500 focus:border-blue-500"
               placeholder="検索(F6) | {{ limitString(implode(',', array_unique($targets)), 15) }}"
               data-tooltip-target="target-list-{{$key}}" data-tooltip-trigger="click"
               autocomplete="off"
        >

        <div id="target-list-{{$key}}" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
            <div>検索対象</div>
            <div class="text-xs">{{implode(',', array_unique($targets))}}</div>
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button wire:click="deleteSearch" type="button"
                class="text-neutral-500 hover:text-neutral-300 absolute outline-0 right-16 bottom-2 font-medium text-sm" tabindex="2">
            <i class="fa fa-xmark"></i></button>
        <button wire:click="executeFilter" type="button"
                class="text-white bg-primary-600 hover:bg-gray-800 absolute right-0 bottom-0 font-medium text-sm h-full px-4 rounded-lg flex items-center justify-center" tabindex="3">
            <span class="whitespace-nowrap">検索</span>
        </button>
    </div>
</div>