@php
    $pickerId = $pickerId ?? 'plMultiFilter';
    $emptyLabel = $emptyLabel ?? 'All';
    $searchPlaceholder = $searchPlaceholder ?? 'Search...';
    $inputName = $inputName ?? 'items[]';
    $selectedValues = array_values($selectedValues ?? []);
    $optionMap = $options ?? [];
    $toggleLabel = $toggleLabel ?? $emptyLabel;
@endphp
<div class="pl-dimension-picker pl-multi-filter-picker" id="{{ $pickerId }}"
     data-empty-label="{{ $emptyLabel }}"
     data-input-name="{{ $inputName }}"
     data-selected='@json($selectedValues)'
     data-labels='@json($optionMap)'>
    <button type="button" class="pl-dimension-picker-toggle form-select text-start" data-multi-filter-toggle aria-haspopup="listbox" aria-expanded="false">
        <span class="pl-dimension-picker-label" data-multi-filter-label>{{ $toggleLabel }}</span>
    </button>
    <div class="pl-dimension-picker-menu d-none" data-multi-filter-menu>
        <div class="pl-dimension-picker-search">
            <i class="bi bi-search"></i>
            <input type="search" class="form-control form-control-sm" data-multi-filter-search placeholder="{{ $searchPlaceholder }}" autocomplete="off">
        </div>
        <div class="pl-dimension-picker-tree" data-multi-filter-list role="listbox">
            @foreach($optionMap as $value => $optionLabel)
                <label class="pl-dimension-picker-item pl-multi-filter-option" data-multi-filter-option data-label="{{ strtolower($optionLabel) }}">
                    <span style="display:inline-block;width:22px"></span>
                    <span class="pl-dimension-picker-option">
                        <input type="checkbox" value="{{ $value }}" data-multi-filter-checkbox {{ in_array($value, $selectedValues, true) ? 'checked' : '' }}>
                        <span class="pl-dimension-picker-option-label">{{ $optionLabel }}</span>
                    </span>
                </label>
            @endforeach
        </div>
        <div class="pl-dimension-picker-empty d-none" data-multi-filter-empty>No matches</div>
        <div class="pl-dimension-picker-actions">
            <button type="button" class="btn btn-link btn-sm p-0" data-multi-filter-clear>{{ $emptyLabel }}</button>
        </div>
    </div>
    <div data-multi-filter-inputs>
        @foreach($selectedValues as $value)
            <input type="hidden" name="{{ $inputName }}" value="{{ $value }}">
        @endforeach
    </div>
</div>