@props([
    'id' => 'filter-panel',
    'toggleId' => 'filter-toggle',
    'applyButtonId' => 'apply-filters',
    'resetButtonId' => 'reset-filters',
    'checked' => true,
])

<!-- Toggle checkbox cho filter panel -->
<input type="checkbox" id="{{ $toggleId }}" class="filter-toggle-checkbox" {{ $checked ? 'checked' : '' }} hidden />

<!-- Bộ lọc nâng cao - layout 1 hàng -->
<div class="filter-panel" id="{{ $id }}">
    <div class="filter-row filter-row-single">
        {{ $slot }}

        <!-- Actions - compact -->
        <div class="filter-item filter-item-actions">
            <div class="filter-actions-inline no-label">
                <x-ui.buttons type="toolbar-button"
                    :id="$resetButtonId"
                    variant="ghost-primary"
                    size="compact"
                    iconFa="rotate-left"
                    label="Xóa"
                    title="Xóa lọc"
                />
                <x-ui.buttons type="toolbar-button"
                    :id="$applyButtonId"
                    variant="primary"
                    size="compact"
                    iconFa="filter"
                    label="Lọc"
                    title="Áp dụng lọc"
                />
            </div>
        </div>
    </div>
</div>
