@props(['placeholder' => 'Search…', 'pills' => [], 'id' => 'filters', 'search' => true, 'keep' => ['sort', 'dir', 'per_page']])
@php
    $count = count($pills);
    $panelPills = collect($pills)->count();
@endphp
<form id="{{ $id }}" method="GET" class="filter-bar card card-body py-3 mb-3 d-print-none" data-autosubmit role="search">
    <div class="d-flex flex-wrap gap-2 align-items-center">
        @if ($search)
            <div class="search-field">
                <i class="bi bi-search" aria-hidden="true"></i>
                <input type="search" name="q" value="{{ request('q') }}" class="form-control" placeholder="{{ $placeholder }}" aria-label="{{ $placeholder }}" autocomplete="off">
            </div>
        @endif
        {{ $inline ?? '' }}
        @isset($panel)
            <button class="btn btn-ghost d-inline-flex align-items-center gap-2" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-panel" aria-expanded="{{ $count ? 'true' : 'false' }}" aria-controls="{{ $id }}-panel">
                <i class="bi bi-sliders" aria-hidden="true"></i>Filters
                @if ($count)<span class="badge text-bg-primary rounded-pill">{{ $count }}</span>@endif
            </button>
        @endisset
        @if ($count)<a href="{{ url()->current() }}" class="btn btn-link btn-sm ms-auto text-decoration-none">Reset all</a>@endif
    </div>
    @isset($panel)
        <div class="collapse {{ $count ? 'show' : '' }}" id="{{ $id }}-panel">
            <div class="filter-panel"><div class="row g-2">{{ $panel }}</div></div>
        </div>
    @endisset
    @if ($count)
        <div class="filter-pills" aria-label="Active filters">
            @foreach ($pills as $p)
                <span class="filter-pill">{{ $p['label'] }}<a href="{{ $p['remove'] }}" aria-label="Remove filter {{ $p['label'] }}"><i class="bi bi-x-lg" aria-hidden="true"></i></a></span>
            @endforeach
        </div>
    @endif
    @foreach ($keep as $k)
        @if (request()->filled($k))<input type="hidden" name="{{ $k }}" value="{{ request($k) }}">@endif
    @endforeach
</form>