{{--
    Reusable grouped checkbox filter.

    Each group renders a heading checkbox that only toggles its children: the values
    submitted with the form are always the child ids, so the backend search keeps
    working with the plain list of ids it already expects.

    Expected variables:
    - $id                : unique dom id for the filter wrapper
    - $name              : form field name for the children, e.g. "title_id[]"
    - $groups            : collection of ['label' => string, 'children' => [['id','name','depth']]]
    - $searchPlaceholder : optional placeholder for the in-list search box
--}}
<div class="checkbox-tree-filter" id="{{ $id }}">
    <div class="d-flex align-items-center mb-1">
        <input type="search" class="form-control form-control-sm checkbox-tree-search mr-2" placeholder="{{ $searchPlaceholder ?? 'Search...' }}">
        <button type="button" class="btn btn-link btn-sm p-0 mr-2 text-nowrap checkbox-tree-select-all">Select all</button>
        <button type="button" class="btn btn-link btn-sm p-0 text-nowrap checkbox-tree-clear">Clear</button>
    </div>
    <div class="checkbox-tree-list">
        @forelse ($groups as $groupIndex => $group)
            <div class="checkbox-tree-group">
                <div class="custom-control custom-checkbox checkbox-tree-group-header">
                    <input type="checkbox" class="custom-control-input checkbox-tree-parent" id="{{ $id }}-group-{{ $groupIndex }}">
                    <label class="custom-control-label" for="{{ $id }}-group-{{ $groupIndex }}">{{ $group['label'] }}</label>
                </div>
                @foreach ($group['children'] as $child)
                    <div class="custom-control custom-checkbox checkbox-tree-child" style="padding-left: {{ 2.25 + ($child['depth'] * 1.25) }}rem;">
                        <input type="checkbox" class="custom-control-input checkbox-tree-item" name="{{ $name }}" value="{{ $child['id'] }}" id="{{ $id }}-item-{{ $child['id'] }}">
                        <label class="custom-control-label" for="{{ $id }}-item-{{ $child['id'] }}">{{ $child['name'] }}</label>
                    </div>
                @endforeach
            </div>
        @empty
            <span class="text-muted">No options available</span>
        @endforelse
    </div>
    <small class="form-text text-muted checkbox-tree-summary"></small>
</div>