@php
    $title = $album->title;
    $description = $album->description ?: "Album photographique — {$album->title}";
@endphp
<x-layout :title="$title" :description="$description">
    <section class="border-b border-ink-900/10 bg-paper-dim py-14">
        <div class="container-page">
            <nav class="flex flex-wrap gap-2 text-xs" aria-label="Fil d'ariane">
                <a href="{{ route('albums.public.index') }}" class="text-ink-500 hover:text-congo-800">Albums</a>
                <span class="text-ink-300">/</span>
                <span class="text-ink-700">{{ $album->title }}</span>
            </nav>
            <h1 class="h-display mt-3 text-4xl font-semibold text-ink-900 sm:text-5xl">{{ $album->title }}</h1>
            @if ($album->description)
                <p class="mt-3 max-w-2xl text-ink-600">{{ $album->description }}</p>
            @endif
            <p class="mt-2 text-xs uppercase tracking-wide text-gold-600">{{ $album->media->count() }} photo(s)</p>
        </div>
    </section>

    <div class="container-page py-16">
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
            @foreach ($album->media as $item)
                <button type="button"
                        data-lightbox-index="{{ $loop->index }}"
                        data-medium="{{ $item->variant('medium','jpg') }}"
                        data-large="{{ $item->variant('large','jpg') }}"
                        data-alt="{{ $item->alt }}"
                        data-caption="{{ $item->caption ?: $item->event }}"
                        class="group overflow-hidden rounded-xl text-left">
                    <x-media-picture :media="$item" size="medium" img-class="aspect-square w-full object-cover transition duration-500 group-hover:scale-105" />
                </button>
            @endforeach
        </div>

        @if ($album->media->isEmpty())
            <p class="py-16 text-center text-ink-500">Aucune photo publiée dans cet album pour le moment.</p>
        @endif
    </div>

    <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>