@props(['searchPlaceholder' => 'Search…', 'statusOptions' => null, 'extraFilters' => null])
<form method="GET" class="filter-bar">
    <div class="fb-search">
        <span class="ic"><x-icon name="search" :size="14" /></span>
        <input type="text" name="q" value="{{ request('q') }}" placeholder="{{ $searchPlaceholder }}">
    </div>
    @if($statusOptions)
        <select name="status" class="fb-select">
            <option value="">All statuses</option>
            @foreach($statusOptions as $value => $label)
                <option value="{{ $value }}" @selected(request('status')===$value)>{{ $label }}</option>
            @endforeach
        </select>
    @endif
    {{ $extraFilters ?? '' }}
    <button type="submit" class="btn btn-primary btn-sm fb-submit">Filter</button>
    @if(request()->hasAny(['q','status']) && ($extraFilters === null || request()->except(['page'])))
        <a href="{{ url()->current() }}" class="btn btn-ghost btn-sm">Reset</a>
    @endif
</form>

@once
@push('head')
<style>
.filter-bar {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--bfk-border-2);
    border-radius: 14px;
    padding: 10px;
}
.fb-search {
    display: flex; align-items: center; gap: 8px;
    flex: 1; min-width: 200px;
    padding: 6px 12px;
    background: var(--bfk-bg-soft);
    border-radius: 10px;
    color: var(--bfk-text-3);
}
.fb-search input {
    border: 0; outline: 0; background: transparent;
    flex: 1; font-size: 14px; color: var(--bfk-text);
}
.fb-search .ic { flex-shrink: 0; }
.fb-select {
    padding: 9px 12px; border: 1px solid var(--bfk-border-2);
    border-radius: 10px; font-size: 13.5px; background: #fff;
    color: var(--bfk-text); min-width: 140px;
}
.fb-submit { white-space: nowrap; }
</style>
@endpush
@endonce
