@php
    $title = 'Albums';
    $description = "Les archives photographiques de Te Litho Tenge Didier, classées par album thématique.";
@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">Galerie</p>
            <h1 class="h-display mt-3 text-4xl font-semibold text-ink-900 sm:text-5xl">Albums</h1>
            <p class="mt-3 max-w-2xl text-ink-600">Une sélection d'archives organisées par thème.</p>
        </div>
    </section>

    <div class="container-page py-16">
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($albums as $album)
                <a href="{{ route('albums.public.show', $album) }}" class="group overflow-hidden rounded-2xl border border-ink-900/10 bg-white/60">
                    <div class="aspect-video overflow-hidden bg-ink-900/5">
                        @if ($album->cover)
                            <x-media-picture :media="$album->cover" size="medium" img-class="h-full w-full object-cover transition duration-500 group-hover:scale-105" />
                        @endif
                    </div>
                    <div class="p-5">
                        <h2 class="h-display text-lg font-semibold text-ink-900 group-hover:text-congo-800">{{ $album->title }}</h2>
                        <p class="mt-1 text-xs uppercase tracking-wide text-gold-600">{{ $album->media_count }} photo(s)</p>
                        @if ($album->description)
                            <p class="mt-2 text-sm text-ink-500">{{ \Illuminate\Support\Str::limit($album->description, 100) }}</p>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</x-layout>