@php
    // Los filtros son enlaces: cada uno conserva lo demás que esté activo.
    $link = fn (array $change) => route('announcements', array_filter(array_merge([
        'q' => $search,
        'tipo' => $activeType,
        'anio' => $activeYear,
    ], $change)));

    $pill = 'inline-flex min-h-10 items-center rounded-lg px-4 font-semibold ring-1 ring-line hover:bg-surface aria-[current=true]:bg-field aria-[current=true]:text-white aria-[current=true]:ring-field';
@endphp
<x-layouts.site title="Comunicados">
    <section class="relative overflow-hidden bg-field text-white">
        <x-site.contours class="[mask-image:linear-gradient(90deg,transparent_0_35%,#000_75%)]" />
        <div class="relative mx-auto max-w-7xl px-4 pt-10 pb-14">
            <nav aria-label="Ruta" class="text-sm text-on-field">
                <a href="{{ route('home') }}" class="hover:text-white hover:underline">Inicio</a>
                <span aria-hidden="true" class="px-1.5">/</span>
                <span aria-current="page">Comunicados</span>
            </nav>
            <h1 class="mt-4 text-5xl font-extrabold tracking-tight [font-stretch:125%] sm:text-6xl">Comunicados</h1>
            <p class="mt-3 max-w-[52ch] text-lg text-on-field">Información oficial de la Facultad para estudiantes, docentes y comunidad universitaria.</p>

            <form method="GET" action="{{ route('announcements') }}" role="search" class="mt-8 flex max-w-xl gap-2" data-search-form>
                @if ($activeType)
                    <input type="hidden" name="tipo" value="{{ $activeType }}">
                @endif
                @if ($activeYear)
                    <input type="hidden" name="anio" value="{{ $activeYear }}">
                @endif
                <div class="relative w-full">
                    <svg data-search-icon class="pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2 text-on-field" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
                    <label for="announcement-search" class="sr-only">Buscar por título o número</label>
                    <input id="announcement-search" type="search" name="q" value="{{ $search }}" maxlength="100" placeholder="Buscar por título o número" data-search-input class="min-h-12 w-full rounded-lg border border-white/25 bg-white/10 pr-12 pl-12 text-white placeholder:text-on-field/70 focus:border-accent focus:bg-white/15 focus:outline-none [color-scheme:dark]">
                    <button type="button" data-search-clear aria-label="Borrar búsqueda" @if (blank($search)) hidden @endif class="absolute top-1/2 right-1.5 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-md text-white hover:bg-white/15">
                        <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>
                    </button>
                </div>
                <button type="submit" class="inline-flex min-h-12 shrink-0 items-center gap-2 rounded-lg bg-accent px-5 font-bold text-accent-ink">Buscar</button>
            </form>
        </div>
    </section>

    <div class="mx-auto max-w-5xl px-4 py-12">
        <div class="mb-8 grid gap-4">
            @if ($types->isNotEmpty())
                <nav aria-label="Tipo de comunicado" class="-mx-4 overflow-x-auto px-4 py-1">
                    <ul class="flex items-center gap-2 whitespace-nowrap">
                        <li class="w-10 text-sm font-semibold text-muted">Tipo</li>
                        <li><a href="{{ $link(['tipo' => null]) }}" aria-current="{{ $activeType ? 'false' : 'true' }}" class="{{ $pill }}">Todos</a></li>
                        @foreach ($types as $type)
                            <li><a href="{{ $link(['tipo' => $type->slug]) }}" aria-current="{{ $activeType === $type->slug ? 'true' : 'false' }}" class="{{ $pill }}">{{ $type->name }}</a></li>
                        @endforeach
                    </ul>
                </nav>
            @endif

            @if (count($years) > 0)
                <nav aria-label="Año" class="-mx-4 overflow-x-auto px-4 py-1">
                    <ul class="flex items-center gap-2 whitespace-nowrap">
                        <li class="w-10 text-sm font-semibold text-muted">Año</li>
                        <li><a href="{{ $link(['anio' => null]) }}" aria-current="{{ $activeYear ? 'false' : 'true' }}" class="{{ $pill }}">Todos</a></li>
                        @foreach ($years as $year)
                            <li><a href="{{ $link(['anio' => $year]) }}" aria-current="{{ (string) $activeYear === (string) $year ? 'true' : 'false' }}" class="{{ $pill }} tabular-nums">{{ $year }}</a></li>
                        @endforeach
                    </ul>
                </nav>
            @endif
        </div>

        @if ($announcements->isEmpty())
            <div class="rounded-3xl bg-surface p-10 text-center">
                @if ($hasFilters)
                    <p class="text-xl font-bold">No encontramos comunicados con esos filtros.</p>
                    <p class="mt-2 text-muted">Prueba con otra palabra, otro tipo u otro año.</p>
                    <a href="{{ route('announcements') }}" class="mt-6 inline-flex min-h-12 items-center rounded-lg bg-accent px-6 font-bold text-accent-ink">Quitar filtros</a>
                @else
                    <p class="text-xl font-bold">Todavía no hay comunicados publicados.</p>
                @endif
            </div>
        @else
            <p class="mb-3 text-sm text-muted">
                {{ trans_choice('{1} 1 comunicado|[2,*] :count comunicados', $announcements->total()) }}@if ($hasFilters) · <a href="{{ route('announcements') }}" class="font-semibold text-link underline underline-offset-4">Quitar filtros</a>@endif
            </p>
            <div class="divide-y divide-line overflow-hidden rounded-2xl ring-1 ring-line">
                @foreach ($announcements as $announcement)
                    <x-site.announcement-row :announcement="$announcement" heading-level="h2" />
                @endforeach
            </div>
            <div class="mt-10">{{ $announcements->onEachSide(1)->links('site.partials.pagination') }}</div>
        @endif
    </div>
</x-layouts.site>