@props([
    'key' => '',
    'cols' => [],
    'title' => '',
    'required' => false,
    'buttonText' => '',
    'allModel' => '',
    'icon' =>  null,
    'width' => 'sm',
    'direction' => \App\Enums\EDirection::DOWN,
    'disabled' => false,
])
@php
    $icon = $icon ?? 'fa-solid fa-circle-check';
@endphp
<div {{ $attributes->merge(["class" => "relative group"]) }} >
    @error("is_all_{$key}") <div class="z-10 absolute text-red-500 text-xs block bg-gray-50 translate-y-8">{{ $message }}</div> @enderror
    <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}}
            @if($required)
                <span class="text-red-500 text-xs">*</span>
            @endif
        </x-slot>
        <div x-data="{is_all: @entangle($allModel).live}" class="p-3">
            <div class="flex justify-between pb-3">
                <x-forms.checkbox :id="'selector-' . $key . '-all'"
                                  x-model="is_all"
                                  wire:model.defer="{{$allModel}}"
                                  focus-skip
                                  label="全{{$title}}"
                                  :disabled="$disabled"
                />
                @if (!$disabled)
                    <x-buttons.primary-2 class="p-1" wire:click="openSelectionModal('{{$key}}')">
                        <i class="fa-solid fa-list-check pr-1"></i>
                        変更
                    </x-buttons.primary-2>
                @endif
            </div>
            @if(count($cols) > 0)
                <div class="text-sm font-semibold text-vivid-900 self-end">
                    <span x-text="is_all ? '除外' : '対象'"></span>
                    <span>{{$title}}</span>
                </div>
                <hr>
                <ul class="max-h-60 overflow-y-auto space-y-2 p-2 text-sm">
                    @foreach($cols as $col => $name)
                        <li class="flex items-center">
                            {{ $name }}
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>
    </x-dropdowns.dropdown>
</div>