{{--
    Projects listing (PRD §10.2): featured first and distinguished; category/tool filters; empty state with
    Clear filters; Load more. Without JS the query string filters server-side; with JS it filters in place.
--}}
@php
    $active = array_filter(['category' => request()->string('category')->value() ?: null, 'tool' => request()->string('tool')->value() ?: null]);
    $matches = fn ($project): bool => (! isset($active['category']) || $project->categories->contains('slug', $active['category']))
        && (! isset($active['tool']) || $project->tools->contains('slug', $active['tool']));
    $projects = $vm->resolved('projects', []);
    $visibleCount = count(array_filter($projects, $matches));
    $groups = [
        'category' => ['label' => __('portfolio.ui.filter_category'), 'options' => collect($vm->resolved('categories', []))->pluck('name', 'slug')->all()],
        'tool' => ['label' => __('portfolio.ui.filter_tool'), 'options' => collect($vm->resolved('tools', []))->pluck('name', 'slug')->all()],
    ];
@endphp
<x-section :vm="$vm" class="!pt-6">
    <div class="container-site" data-module="filters" data-per-page="{{ (int) $vm->get('per_page', 9) }}" data-status-template="{{ __('portfolio.ui.filter_status') }}">
        @if ($vm->get('show_filters', true) && $projects !== [])
            @include('partials.listing-filters', ['groups' => $groups, 'active' => $active, 'baseUrl' => route('projects.index')])
        @endif

        <p class="sr-only" aria-live="polite" data-filter-status></p>

        <div class="grid-cards" data-filter-list>
            @foreach ($projects as $project)
                <x-project-card :project="$project" source="listing" :featured="$project->is_featured" :hidden="! $matches($project)" />
            @endforeach
        </div>

        <x-empty-state :message="$projects === [] ? __('portfolio.ui.nothing_here_yet') : __('portfolio.ui.no_results')"
                       data-filter-empty :hidden="$visibleCount > 0" class="mt-2">
            @if ($projects !== [])
                <x-button :href="route('projects.index')" variant="secondary" data-filter-clear>{{ __('portfolio.ui.clear_filters') }}</x-button>
            @endif
        </x-empty-state>

        <div class="mt-10 text-center">
            <x-button type="button" variant="secondary" data-filter-more hidden>{{ __('portfolio.ui.load_more') }}</x-button>
        </div>
    </div>
</x-section>