{{--
    Filter chips for listings (PRD §10.2, §16.2). Plain links filter server-side via the query string (no JS);
    the `filters` module intercepts them to filter in place without a reload and keeps the URL in sync.
--}}
<div class="mb-8 space-y-4" data-filter-controls>
    @foreach ($groups as $param => $group)
        @if ($group['options'] !== [])
            <div role="group" aria-label="{{ __('portfolio.ui.filter_by') }} {{ $group['label'] }}" class="flex flex-wrap items-center gap-2">
                <span class="mr-1 text-sm font-semibold text-muted">{{ $group['label'] }}</span>
                <a href="{{ $baseUrl.'?'.http_build_query(array_filter([...$active, $param => null])) }}" data-filter-param="{{ $param }}" data-filter-value=""
                   @if (empty($active[$param])) aria-current="true" @endif
                   class="inline-flex min-h-11 items-center rounded-full border border-line px-4 text-sm font-medium text-ink no-underline aria-[current=true]:border-ink aria-[current=true]:bg-ink aria-[current=true]:text-page">{{ __('portfolio.ui.filter_all') }}</a>
                @foreach ($group['options'] as $slug => $label)
                    <a href="{{ $baseUrl.'?'.http_build_query(array_filter([...$active, $param => $slug])) }}" data-filter-param="{{ $param }}" data-filter-value="{{ $slug }}"
                       @if (($active[$param] ?? null) === $slug) aria-current="true" @endif
                       class="inline-flex min-h-11 items-center rounded-full border border-line px-4 text-sm font-medium text-ink no-underline aria-[current=true]:border-ink aria-[current=true]:bg-ink aria-[current=true]:text-page">{{ $label }}</a>
                @endforeach
            </div>
        @endif
    @endforeach
</div>