@php
    $pickerId = $pickerId ?? 'plDimensionPicker';
    $toggleId = $toggleId ?? $pickerId . 'Toggle';
    $menuId = $menuId ?? $pickerId . 'Menu';
    $treeId = $treeId ?? $pickerId . 'Tree';
    $searchId = $searchId ?? $pickerId . 'Search';
    $emptyId = $emptyId ?? $pickerId . 'Empty';
    $labelId = $labelId ?? $pickerId . 'Label';
    $inputsId = $inputsId ?? $pickerId . 'Inputs';
    $clearId = $clearId ?? $pickerId . 'Clear';
    $inputName = $inputName ?? 'dimension_value_ids[]';
    $emptyLabel = $emptyLabel ?? 'All dimensions';
    $searchPlaceholder = $searchPlaceholder ?? 'Search dimensions...';
    $toggleLabel = $toggleLabel ?? $emptyLabel;
    $selectedIds = array_values(array_unique(array_map('intval', $selectedIds ?? [])));
@endphp
<div class="pl-dimension-picker" id="{{ $pickerId }}"
     data-tree='@json($dimensionTree ?? [])'
     data-selected='@json($selectedIds)'>
    <button type="button" class="pl-dimension-picker-toggle form-select text-start" id="{{ $toggleId }}" aria-haspopup="listbox" aria-expanded="false">
        <span class="pl-dimension-picker-label" id="{{ $labelId }}">{{ $toggleLabel }}</span>
    </button>
    <div class="pl-dimension-picker-menu d-none" id="{{ $menuId }}">
        <div class="pl-dimension-picker-search">
            <i class="bi bi-search"></i>
            <input type="search" class="form-control form-control-sm" id="{{ $searchId }}" placeholder="{{ $searchPlaceholder }}" autocomplete="off">
        </div>
        <div class="pl-dimension-picker-tree" id="{{ $treeId }}" role="listbox"></div>
        <div class="pl-dimension-picker-empty d-none" id="{{ $emptyId }}">No matching dimensions</div>
        <div class="pl-dimension-picker-actions">
            <button type="button" class="btn btn-link btn-sm p-0" id="{{ $clearId }}">Clear selection</button>
        </div>
    </div>
    <div id="{{ $inputsId }}">
        @foreach($selectedIds as $selectedId)
            <input type="hidden" name="{{ $inputName }}" value="{{ $selectedId }}">
        @endforeach
    </div>
</div>