@php
    $title = 'Galerie — Archives de terrain';
    $description = "Plus de 4 000 photographies d'archive classées par thème, année et lieu : la mémoire visuelle du parcours de Te Litho Tenge Didier.";
@endphp
<x-layout :title="$title" :description="$description">

    <section class="border-b border-ink-900/10 bg-paper-dim py-14">
        <div class="container-page">
            <p class="eyebrow">L'homme de terrain</p>
            <h1 class="h-display mt-3 text-4xl font-semibold text-ink-900 sm:text-5xl">Galerie de terrain</h1>
            <p class="mt-3 max-w-2xl text-ink-600">
                Des archives issues d'un fonds de plus de 5 000 photographies, filtrables par thème, par année et par
                mot-clé. Les images non datées avec certitude sont signalées comme telles.
            </p>

            <form method="GET" action="{{ route('galerie.index') }}" class="mt-8 flex flex-wrap items-end gap-4">
                <div>
                    <label for="categorie" class="block text-xs font-semibold uppercase tracking-wide text-ink-500">Catégorie</label>
                    <select name="categorie" id="categorie" class="mt-1 rounded-lg border border-ink-900/15 bg-white px-3 py-2 text-sm">
                        <option value="">Toutes les catégories</option>
                        @foreach ($categories as $slug => $label)
                            <option value="{{ $slug }}" @selected(($filters['categorie'] ?? '') === $slug)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="annee" class="block text-xs font-semibold uppercase tracking-wide text-ink-500">Année</label>
                    <select name="annee" id="annee" class="mt-1 rounded-lg border border-ink-900/15 bg-white px-3 py-2 text-sm">
                        <option value="">Toutes les années</option>
                        @foreach ($years as $year)
                            <option value="{{ $year }}" @selected((string)($filters['annee'] ?? '') === (string)$year)>{{ $year }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex-1 min-w-[200px]">
                    <label for="q" class="block text-xs font-semibold uppercase tracking-wide text-ink-500">Recherche</label>
                    <input type="search" name="q" id="q" value="{{ $filters['q'] ?? '' }}" placeholder="Un lieu, un évènement..."
                           class="mt-1 w-full rounded-lg border border-ink-900/15 bg-white px-3 py-2 text-sm">
                </div>
                <button type="submit" class="btn-primary">Filtrer</button>
                @if(array_filter($filters))
                    <a href="{{ route('galerie.index') }}" class="text-xs font-semibold text-ink-500 hover:text-congo-800">Réinitialiser</a>
                @endif
            </form>
        </div>
    </section>

    <div class="container-page py-12">
        <p class="mb-6 text-sm text-ink-500">{{ $media->total() }} photographie(s) trouvée(s).</p>

        <div class="columns-2 gap-3 sm:columns-3 lg:columns-4 [column-fill:_balance]">
            @foreach ($media as $i => $item)
                <button type="button"
                        data-lightbox-index="{{ $i }}"
                        data-medium="{{ $item->variant('medium','jpg') }}"
                        data-large="{{ $item->variant('large','jpg') }}"
                        data-alt="{{ $item->alt }}"
                        data-caption="{{ trim(($item->event ?? '').' — '.($item->period ?? 'Non daté')) }}"
                        class="group mb-3 block w-full break-inside-avoid overflow-hidden rounded-xl text-left">
                    <span class="relative block">
                        <x-media-picture :media="$item" size="thumb" img-class="w-full object-cover transition duration-500 group-hover:scale-105" />
                        <span class="absolute right-2 top-2">
                            <x-confidence-badge :confidence="$item->confidence" class="!bg-ink-900/70 !text-paper !ring-0 backdrop-blur" />
                        </span>
                    </span>
                    <span class="mt-1.5 block truncate text-xs text-ink-500">{{ $item->event }}{{ $item->period ? ' · '.$item->period : '' }}</span>
                </button>
            @endforeach
        </div>

        @if($media->isEmpty())
            <p class="py-16 text-center text-ink-500">Aucune photographie ne correspond à ces critères.</p>
        @endif

        <div class="mt-10">{{ $media->links() }}</div>
    </div>

    {{-- Lightbox --}}
    <div id="lightbox" class="fixed inset-0 z-50 hidden items-center justify-center bg-ink-900/95 p-4">
        <button id="lightbox-close" type="button" aria-label="Fermer" class="absolute right-5 top-5 text-paper/80 hover:text-paper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-7 w-7"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
        <button id="lightbox-prev" type="button" aria-label="Précédent" class="absolute left-3 top-1/2 -translate-y-1/2 text-paper/70 hover:text-paper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-10 w-10"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        </button>
        <figure class="max-h-[85vh] max-w-4xl">
            <img id="lightbox-img" src="" alt="" class="max-h-[75vh] w-full rounded-lg object-contain">
            <figcaption id="lightbox-caption" class="mt-3 text-center text-sm text-paper/70"></figcaption>
        </figure>
        <button id="lightbox-next" type="button" aria-label="Suivant" class="absolute right-3 top-1/2 -translate-y-1/2 text-paper/70 hover:text-paper">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-10 w-10"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
        </button>
    </div>
</x-layout>