@extends('frontend-v3.pages.layout')

@section('page')
    @include('frontend-v3.pages.partials.styles')

    @php
        $albumTitle = $localized($record, 'title') ?: 'Gallery Album';
        $images = $record->images->values()->map(function ($galleryImage) use ($imageUrl, $localized) {
            $asset = $galleryImage->image;

            return [
                'src' => $imageUrl($asset),
                'caption' => $localized($galleryImage, 'caption') ?: $localized($galleryImage, 'title') ?: ($asset?->title_en ?: 'Kalakshetra gallery image'),
            ];
        });
    @endphp

    <section class="v3-inner-hero">
        <div class="container">
            <div class="v3-eyebrow">Gallery Album</div>
            <h1 class="v3-title">{{ $albumTitle }}</h1>
            <p class="v3-summary">Browse selected images from this album.</p>
        </div>
    </section>

    <section class="v3-section">
        <div class="container-fluid px-4 px-xl-5">
            <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-4">
                <div>
                    <p class="v3-eyebrow text-dark mb-2">Photo Collection</p>
                    <h2 class="v3-album-heading mb-0">{{ $images->count() }} image{{ $images->count() === 1 ? '' : 's' }}</h2>
                </div>
                <a class="v3-album-back" href="{{ route('frontend-v3.gallery.index') }}">Back to albums</a>
            </div>

            <div class="v3-album-grid" id="gallery-album-images">
                @forelse ($images as $index => $image)
                    <button class="v3-album-image v3-lightbox-trigger" type="button" data-image-lightbox data-lightbox-group="gallery-album" data-lightbox-caption="{{ $image['caption'] }}" data-gallery-item @if ($index >= 8) hidden @endif>
                        <img src="{{ $image['src'] }}" alt="{{ $image['caption'] }}" loading="lazy">
                        {{-- <span>{{ $image['caption'] }}</span> --}}
                    </button>
                @empty
                    <div class="v3-empty">No images are published in this album yet.</div>
                @endforelse
            </div>
            @if ($images->count() > 8)
                <div class="gallery-load-more-wrap"><button class="gallery-load-more" type="button" data-gallery-more="gallery-album-images">Load more</button></div>
            @endif
        </div>
    </section>

    @include('frontend-v3.pages.partials.gallery-load-more')
    @include('frontend-v3.pages.partials.image-lightbox')

    <style>
        .v3-album-heading {
            color: var(--maroon);
            font-family: "Playfair Display", serif;
            font-size: clamp(28px, 3vw, 42px);
        }

        .v3-album-back {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            padding: 0 18px;
            border: 1px solid rgba(118, 14, 29, .18);
            border-radius: 999px;
            color: var(--maroon);
            background: rgba(255, 255, 255, .62);
            font-weight: 800;
        }

        .v3-album-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 20px;
        }

        .v3-album-image {
            position: relative;
            height: 330px;
            padding: 0;
            border: 1px solid #68432f;
            border-radius: 8px;
            overflow: hidden;
            background: #2f1a12;
            box-shadow: 0 16px 38px rgba(46, 25, 10, .12);
            cursor: pointer;
        }

        .v3-album-image img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .35s ease;
        }

        .v3-album-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 48%, rgba(49, 6, 9, .82));
        }

        .v3-album-image span {
            position: absolute;
            left: 18px;
            right: 18px;
            bottom: 16px;
            z-index: 2;
            color: #fff;
            font-family: "Playfair Display", serif;
            font-size: 21px;
            line-height: 1.2;
            text-align: left;
        }

        .v3-album-image:hover img {
            transform: scale(1.05);
        }

        @media (max-width: 991.98px) {
            .v3-album-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 575.98px) {
            .v3-album-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .v3-album-image {
                height: 280px;
            }
        }
    </style>

@endsection