@php
    // Los filtros son enlaces: cada uno conserva lo demás que esté activo.
    $link = fn (array $change) => route('events', array_filter(array_merge([
        'ver' => $showingPast ? 'pasados' : null,
        'tipo' => $activeType,
        'sede' => $activeCampus,
    ], $change)));

    $chip = 'inline-flex min-h-10 items-center gap-2 rounded-full bg-bg px-3.5 font-semibold ring-1 ring-line hover:ring-link aria-[current=true]:bg-field aria-[current=true]:text-white aria-[current=true]:ring-field';
    $count = 'text-sm font-normal text-muted tabular-nums';
    $segment = 'inline-flex min-h-10 flex-1 items-center justify-center rounded-md px-2 font-semibold whitespace-nowrap hover:text-link sm:px-4 aria-[current=true]:bg-field aria-[current=true]:text-white';
    $tab = 'inline-flex min-h-11 items-center rounded-md px-5 font-bold text-on-field hover:text-white aria-[current=page]:bg-accent aria-[current=page]:text-accent-ink';
@endphp
<x-layouts.site title="Eventos">
    <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-12">
            <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">Eventos</span>
            </nav>
            <h1 class="mt-4 text-5xl font-extrabold tracking-tight [font-stretch:125%] sm:text-6xl">Eventos</h1>
            <p class="mt-3 max-w-[52ch] text-lg text-on-field">La agenda de la Facultad: conferencias, talleres, ceremonias y actividades para la comunidad universitaria.</p>

            <nav aria-label="Agenda" class="mt-8 inline-flex gap-1 rounded-lg bg-white/10 p-1">
                <a href="{{ $link(['ver' => null]) }}" @if (! $showingPast) aria-current="page" @endif class="{{ $tab }}">Próximos</a>
                <a href="{{ $link(['ver' => 'pasados']) }}" @if ($showingPast) aria-current="page" @endif class="{{ $tab }}">Pasados</a>
            </nav>
        </div>
    </section>

    <div class="mx-auto max-w-7xl px-4 py-12">
        {{--
            Dos filtros con forma distinta para que no se confundan: el tipo son
            etiquetas con su cantidad; la sede, un selector de tres posiciones.
            En celular las etiquetas bajan de línea: todas quedan a la vista,
            sin depender de un desplazamiento lateral que no se nota.
        --}}
        <div class="mb-10 rounded-3xl bg-surface p-4 sm:p-5">
            <div class="grid gap-5 lg:grid-cols-[1fr_auto] lg:items-end">
                @if ($types->isNotEmpty())
                    <nav aria-labelledby="filter-type" class="min-w-0">
                        <h2 id="filter-type" class="mb-2 text-sm font-semibold text-muted">Tipo de evento</h2>
                        <ul class="flex flex-wrap gap-2">
                            <li><a href="{{ $link(['tipo' => null]) }}" aria-current="{{ $activeType ? 'false' : 'true' }}" class="{{ $chip }}">Todos</a></li>
                            @foreach ($types as $type)
                                @php $current = $activeType === $type->slug; @endphp
                                <li>
                                    <a href="{{ $link(['tipo' => $current ? null : $type->slug]) }}" aria-current="{{ $current ? 'true' : 'false' }}" class="{{ $chip }}">
                                        {{ $type->name }}
                                        <span class="{{ $count }} {{ $current ? 'text-on-field' : '' }}"><span class="sr-only">, </span>{{ $type->events_count }}<span class="sr-only"> {{ $type->events_count === 1 ? 'evento' : 'eventos' }}</span></span>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </nav>
                @endif

                <nav aria-labelledby="filter-campus" class="min-w-0">
                    <h2 id="filter-campus" class="mb-2 text-sm font-semibold text-muted">Sede o filial</h2>
                    <ul class="flex gap-1 rounded-lg bg-bg p-1 ring-1 ring-line">
                        <li class="flex flex-1"><a href="{{ $link(['sede' => null]) }}" aria-current="{{ $activeCampus ? 'false' : 'true' }}" class="{{ $segment }}">Todas</a></li>
                        @foreach (\App\Enums\Campus::cases() as $campus)
                            <li class="flex flex-1"><a href="{{ $link(['sede' => $campus->value]) }}" aria-current="{{ $activeCampus === $campus->value ? 'true' : 'false' }}" class="{{ $segment }}">{{ $campus->shortLabel() }}</a></li>
                        @endforeach
                    </ul>
                </nav>
            </div>

            <p class="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 border-t border-line pt-4 text-sm" role="status">
                <span>
                    <strong class="tabular-nums">{{ $events->total() }}</strong>
                    {{ $events->total() === 1 ? 'evento' : 'eventos' }} {{ $showingPast ? ($events->total() === 1 ? 'pasado' : 'pasados') : ($events->total() === 1 ? 'próximo' : 'próximos') }}@if ($hasFilters) con estos filtros @endif
                </span>
                @if ($hasFilters)
                    <a href="{{ route('events', $showingPast ? ['ver' => 'pasados'] : []) }}" class="font-semibold text-link underline underline-offset-4">Quitar filtros</a>
                @endif
            </p>
        </div>

        @if ($events->isEmpty())
            <div class="rounded-3xl bg-surface p-10 text-center">
                @if ($hasFilters)
                    <p class="text-xl font-bold">No encontramos eventos con esos filtros.</p>
                    <a href="{{ route('events', $showingPast ? ['ver' => 'pasados'] : []) }}" class="mt-6 inline-flex min-h-12 items-center rounded-lg bg-accent px-6 font-bold text-accent-ink">Quitar filtros</a>
                @elseif ($showingPast)
                    <p class="text-xl font-bold">Todavía no hay eventos pasados.</p>
                    <a href="{{ route('events') }}" class="mt-6 inline-flex min-h-12 items-center rounded-lg bg-accent px-6 font-bold text-accent-ink">Ver próximos eventos</a>
                @else
                    <p class="text-xl font-bold">No hay eventos programados por ahora.</p>
                    <p class="mt-2 text-muted">Cuando se anuncie uno, aparecerá aquí.</p>
                    <a href="{{ route('events', ['ver' => 'pasados']) }}" class="mt-6 inline-flex min-h-12 items-center rounded-lg bg-accent px-6 font-bold text-accent-ink">Ver eventos pasados</a>
                @endif
            </div>
        @else
            <div data-load-more-list class="grid gap-12">
                @foreach ($groups as $month => $monthEvents)
                    @php
                        [$monthName, $year] = explode(' ', $month) + [1 => ''];
                        $monthId = 'month-'.Str::slug($month);
                    @endphp
                    {{-- El mes queda a la izquierda y acompaña el desplazamiento de sus eventos. --}}
                    <section data-group="{{ $monthId }}" class="grid gap-x-10 gap-y-4 lg:grid-cols-[11rem_1fr]" aria-labelledby="{{ $monthId }}">
                        <h2 id="{{ $monthId }}" class="self-start lg:sticky lg:top-24">
                            <span class="block text-3xl font-extrabold capitalize [font-stretch:118%] {{ $showingPast ? 'text-muted' : '' }}">{{ $monthName }}</span>
                            <span class="text-muted">{{ $year }} · <span data-group-count data-one="evento" data-many="eventos">{{ trans_choice('{1} 1 evento|[2,*] :count eventos', $monthEvents->count()) }}</span></span>
                        </h2>
                        <div data-group-items class="grid gap-3">
                            @foreach ($monthEvents as $event)
                                <x-site.event-card :event="$event" />
                            @endforeach
                        </div>
                    </section>
                @endforeach
            </div>

            {{-- Con JavaScript, «Ver más eventos»; sin él, las páginas numeradas. --}}
            @if ($events->hasMorePages())
                <div class="mt-12 text-center">
                    <button type="button" hidden data-load-more data-noun="eventos" data-next="{{ $events->nextPageUrl() }}" class="inline-flex min-h-12 items-center gap-2 rounded-lg bg-field px-6 font-bold text-white hover:bg-link">Ver más eventos</button>
                </div>
            @endif
            <p data-load-more-status class="sr-only" aria-live="polite"></p>
            <div data-pagination class="mt-12">{{ $events->onEachSide(1)->links('site.partials.pagination') }}</div>
        @endif
    </div>
</x-layouts.site>