@props(['category', 'key' => null, 'is_locked' => false])
<div wire:key="{{$key ?: 'null'}}">
    <div class="flex pt-1 mb-5" x-data="{open: false}">
        <div class="relative w-full">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg aria-hidden="true" class="w-5 h-5 text-gray-500" fill="none"
                     stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <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"></path>
                </svg>
                <div class="ml-2 text-gray-500">検索</div>
            </div>
            <input type="button" @click="open = !open" wire:click="openSearch" autocomplete="off"
                   class="block p-2.5 pl-10 w-full bg-white text-sm text-gray-900 border-2 cursor-pointer rounded hover:bg-gray-50"
                   placeholder="検索" required>
                <div class="z-10 absolute w-full bg-gray-50 border rounded-lg shadow-lg pb-5"
                     x-show="open" x-cloak
                     @click.away="open = false"
                >
                    @livewire("tables.{$category}-datatable", ['is_selectable' => true, 'parent' => "register-{$category}", 'need_filter' => true], key($category . '-' . $key . '-datatable'))
                </div>
        </div>
    </div>
</div>