@props([
    'key' => '',
    'cols' => [],
    'title' => '',
    'buttonText' => '',
    'multipleSelect' => '',
    'icon' =>  null,
    'width' => 'sm',
    'direction' => \App\Enums\EDirection::DOWN,
])
@php
    $icon = $icon ?? 'fa-solid fa-circle-check';
@endphp
<div {{ $attributes->merge(["class" => "relative group"]) }} >
    <x-dropdowns.dropdown id="col-filter-{{$key}}" width="{{$width}}" :has-shadow="false" :$direction focusable >
        <x-slot name="header">
            <i class="{{$icon}} pr-3"></i>
            {{$buttonText}}
        </x-slot>
        <div class="p-3">
            <div class="absolute top-2 right-2">
                <x-forms.checkbox-2 :id="'selector-' . $key . '-all'"
                                    wire:click="checkAllSelector('{{$multipleSelect}}')"
                                    wire:model.live="{{$multipleSelect . '.all'}}"
                                    focus-skip
                                    label="全選択"
                />
            </div>
            <h6 class="mb-3 text-sm font-semibold text-black">{{$title}}</h6>
            <ul class="max-h-60 overflow-y-auto space-y-2 text-sm">
                @foreach($cols as $col => $name)
                    <li class="flex items-center">
                        <input id="col-{{$col}}-{{$key}}" type="checkbox" value=""
                               wire:model.live="{{$multipleSelect}}.{{$col}}"
                               class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 focus:ring-2">
                        <label for="col-{{$col}}-{{$key}}"
                               class="ml-2 text-sm font-medium text-gray-900 cursor-pointer hover:text-primary-400">{{$name}}</label>
                    </li>
                @endforeach
            </ul>
        </div>
    </x-dropdowns.dropdown>
</div>