<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>
            <div class="filter-mode">
                <button type="button" wire:click="$set('{{ $modeModel }}', 'or')" class="filter-btn-mode {{ $selectedMode === 'or' ? 'active' : '' }}">OR</button>
                <button type="button" wire:click="$set('{{ $modeModel }}', 'and')" class="filter-btn-mode {{ $selectedMode === 'and' ? 'active' : '' }}">AND</button>
            </div>
            <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 class="filter-options" x-show="open" x-transition>
        @foreach($items as $item)
            <label class="filter-option">
                <input type="checkbox" wire:model.live="{{ $model }}" value="{{ $item->{$idProperty} }}">
                {{ $item->{$nameProperty} }}
            </label>
        @endforeach
    </div>
</div>
