@php
    use App\Enums\RecordStatus;
    $filterValues = $filters ?? [];
@endphp

<x-ui.filter-bar id="institution-filters">
    <form method="GET" action="{{ route($routePrefix . '.index') }}" class="row g-3 align-items-end">
        <div class="col-md-5">
            <label for="filter-search" class="bv-form-label">Search</label>
            <div class="input-group">
                <span class="input-group-text bg-transparent border-end-0"><i class="bi bi-search"></i></span>
                <input type="search"
                       id="filter-search"
                       name="search"
                       class="form-control bv-form-control border-start-0"
                       value="{{ $filterValues['search'] ?? '' }}"
                       placeholder="Search {{ strtolower($resourceLabel ?? 'records') }}…">
            </div>
        </div>
        <div class="col-md-3">
            <label for="filter-status" class="bv-form-label">Status</label>
            <select id="filter-status" name="status" class="form-select bv-form-control">
                <option value="">All statuses</option>
                @foreach(RecordStatus::cases() as $status)
                    <option value="{{ $status->value }}" @selected(($filterValues['status'] ?? '') === $status->value)>
                        {{ $status->label() }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label for="filter-trashed" class="bv-form-label">Deleted</label>
            <select id="filter-trashed" name="trashed" class="form-select bv-form-control">
                <option value="">Active only</option>
                <option value="with" @selected(($filterValues['trashed'] ?? '') === 'with')>Include deleted</option>
                <option value="only" @selected(($filterValues['trashed'] ?? '') === 'only')>Deleted only</option>
            </select>
        </div>
        <div class="col-md-2 d-flex gap-2">
            <x-ui.button type="submit" variant="primary" icon="bi-funnel" class="flex-grow-1">Filter</x-ui.button>
            <x-ui.button variant="ghost" :href="route($routePrefix . '.index')" icon="bi-x-lg" class="bv-btn--icon" aria-label="Clear filters" />
        </div>
        @foreach($filterValues as $key => $value)
            @if(! in_array($key, ['search', 'status', 'trashed', 'page', 'per_page']) && filled($value))
                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
            @endif
        @endforeach
    </form>

    @if(filled($filterValues['search'] ?? null) || filled($filterValues['status'] ?? null) || filled($filterValues['trashed'] ?? null))
        <x-slot:chips>
            @if(filled($filterValues['search'] ?? null))
                <span class="bv-badge bv-badge--primary">Search: {{ $filterValues['search'] }}</span>
            @endif
            @if(filled($filterValues['status'] ?? null))
                <span class="bv-badge bv-badge--info">Status: {{ RecordStatus::tryFrom($filterValues['status'])?->label() ?? $filterValues['status'] }}</span>
            @endif
            @if(filled($filterValues['trashed'] ?? null))
                <span class="bv-badge bv-badge--warning">Trashed: {{ $filterValues['trashed'] }}</span>
            @endif
        </x-slot:chips>
    @endif
</x-ui.filter-bar>