@props([
    'title' => 'Filters',
    'collapsed' => false,
    'id' => 'chmFilters',
])

<div {{ $attributes->merge(['class' => 'chm-filter-panel' . ($collapsed ? ' is-collapsed' : '')]) }}>
    <div class="chm-filter-panel-header">
        <h6><i class="fa-solid fa-filter"></i> {{ $title ?? 'Filters' }}</h6>
        @if($collapsed)
            <button type="button" class="btn btn-sm btn-link text-decoration-none p-0 chm-filter-toggle" data-bs-toggle="collapse" data-bs-target="#{{ $id ?? 'chmFilters' }}">
                Show filters
            </button>
        @endif
        @isset($actions)
            <div class="d-flex gap-2">{{ $actions }}</div>
        @endisset
    </div>
    <div @if($collapsed) class="collapse" id="{{ $id ?? 'chmFilters' }}" @endif>
        <div class="row g-3">
            {{ $slot }}
        </div>
    </div>
</div>