@props([
    'collapsible' => true,
])

<div {{ $attributes->merge(['class' => 'bv-filter-bar']) }}>
    <div class="d-flex align-items-center justify-content-between">
        <h4 class="h6 mb-0 fw-semibold">
            <i class="bi bi-funnel me-2" aria-hidden="true"></i>Filters
        </h4>
        <div class="d-flex gap-2">
            @isset($actions)
                {{ $actions }}
            @endisset
            @if($collapsible)
                <button class="bv-btn bv-btn--ghost bv-btn--sm"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#{{ $attributes->get('id', 'filter-panel') }}"
                        aria-expanded="true"
                        aria-controls="{{ $attributes->get('id', 'filter-panel') }}">
                    <i class="bi bi-chevron-down" aria-hidden="true"></i>
                </button>
            @endif
        </div>
    </div>

    <div class="collapse show mt-3" id="{{ $attributes->get('id', 'filter-panel') }}">
        {{ $slot }}
    </div>

    @isset($chips)
        <div class="bv-filter-bar__chips">
            {{ $chips }}
        </div>
    @endisset
</div>