<div class="filter-group" x-data="{open: false}">
    <div class="filter-title-row" @click="open = !open">
        <div class="filter-title-left">
            <h4 class="filter-title">{{ $title }}</h4>
            <span class="internal-filter-count" x-show="$wire.{{ $model }}.length > 0" x-text="$wire.{{ $model }}.length"></span>
        </div>
        <div class="filter-title-right" @click.stop>
            <button type="button" class="internal-filter-clear" x-show="$wire.{{ $model }}.length > 0" @click="$wire.set('{{ $model }}',[])" title="Clear">
                <i data-lucide="x" size="11"></i>
            </button>
            <i data-lucide="chevron-down" size="14" class="filter-chevron" :class="{ 'rotated': !open }"></i>
        </div>
    </div>
    <div x-show="open" x-transition>
        <div class="internal-filter-search">
            <i data-lucide="search" size="13"></i>
            <input type="text" wire:model.live.debounce.300ms="{{ $searchModel }}" placeholder="Search...">
        </div>
        <div class="filter-options">
            @foreach($items as $item)
                <label class="filter-option">
                    <input type="checkbox" wire:model.live="{{ $model }}" value="{{ $item->{$idProperty} }}">
                    {{ $item->{$nameProperty} }}
                </label>
            @endforeach
        </div>
    </div>
</div>
