@extends('layouts.public')

@section('public-content')
<section class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
    <h1 class="font-display text-3xl font-bold text-gray-900 mb-8">Gallery</h1>

    @if($albums->count())
        <div class="space-y-8">
            @foreach($albums as $album)
                <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-5">
                    <h2 class="font-display font-semibold text-gray-900 text-lg mb-4">{{ $album->title }}</h2>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                        @foreach($album->images as $image)
                            <div class="group relative aspect-square overflow-hidden rounded-lg bg-gray-100">
                                <img src="{{ asset('storage/' . $image->filename) }}" alt="{{ $image->caption ?? $album->title }}" class="h-full w-full object-cover transition-transform group-hover:scale-105">
                                @if($image->caption)
                                    <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <p class="text-xs text-white truncate">{{ $image->caption }}</p>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 p-12 text-center">
            <p class="text-gray-500">No albums available yet.</p>
        </div>
    @endif
</section>
@endsection