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

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

    <section class="v3-inner-hero">
        <div class="container">
            <div class="v3-eyebrow">Photo Archive</div>
            <h1 class="v3-title">Gallery</h1>
            <p class="v3-summary">Moments, exhibitions, spaces and cultural memory from Srimanta Sankaradeva Kalakshetra.</p>
        </div>
    </section>

    <section class="v3-section">
        <div class="container">
            <div class="row g-4" id="gallery-album-list">
                @forelse ($records as $index => $record)
                    @php
                        $title = $localized($record, 'title') ?: 'Gallery Album';
                        $cover = $albumImage($record);
                    @endphp
                    <div class="col-12 col-md-6 col-xl-4" data-gallery-item @if ($index >= 8) hidden @endif>
                        <a class="v3-gallery-album-card" href="{{ route('frontend-v3.gallery.show', $record->slug) }}" style="background-image: url('{{ $cover }}')">
                            <span class="v3-gallery-album-count">{{ $record->published_images_count }} image{{ $record->published_images_count === 1 ? '' : 's' }}</span>
                            <span class="v3-gallery-album-content">
                                <span class="v3-gallery-album-kicker">Album</span>
                                <span class="v3-gallery-album-title">{{ $title }}</span>
                            </span>
                        </a>
                    </div>
                @empty
                    <div class="col-12"><div class="v3-empty">No gallery albums are published yet.</div></div>
                @endforelse
            </div>
            @if ($records->count() > 8)
                <div class="gallery-load-more-wrap"><button class="gallery-load-more" type="button" data-gallery-more="gallery-album-list">Load more</button></div>
            @endif
        </div>
    </section>

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

    <style>
        .v3-gallery-album-card {
            position: relative;
            display: block;
            min-height: 340px;
            height: 100%;
            overflow: hidden;
            border-radius: 10px;
            background-size: cover;
            background-position: center;
            box-shadow: 0 18px 42px rgba(46, 25, 10, .14);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .v3-gallery-album-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(49, 6, 9, .88)),
                linear-gradient(90deg, rgba(118, 14, 29, .18), transparent 58%);
        }

        .v3-gallery-album-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 26px 54px rgba(46, 25, 10, .2);
        }

        .v3-gallery-album-count {
            position: absolute;
            top: 16px;
            right: 16px;
            z-index: 2;
            padding: 7px 11px;
            border: 1px solid rgba(255, 255, 255, .28);
            border-radius: 999px;
            color: #fff;
            background: rgba(49, 6, 9, .52);
            backdrop-filter: blur(10px);
            font-size: 12px;
            font-weight: 800;
        }

        .v3-gallery-album-content {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 22px;
            z-index: 2;
            color: #fff;
        }

        .v3-gallery-album-kicker {
            display: block;
            color: #f4ca75;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .14em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .v3-gallery-album-title {
            display: block;
            font-family: "Playfair Display", serif;
            font-size: 28px;
            line-height: 1.12;
        }
    </style>
@endsection