@extends('layouts.website')

@section('title', 'Photo Gallery')

@section('hero')
    <x-site.partials.inner-banner
        title="Photo Gallery"
        :breadcrumb="[
            ['label' => 'Gallery'],
            ['label' => 'Photo Gallery'],
        ]" />
@endsection

@push('styles')
<style>
.album-card {
    background: #0d0d0d;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .6rem;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    display: block;
    text-decoration: none;
}
.album-card:hover {
    border-color: var(--pgs_primary_color, #c0392b);
    box-shadow: 0 0 0 1px var(--pgs_primary_color, #c0392b), 0 8px 28px rgba(0,0,0,.5);
    transform: translateY(-4px);
}
.album-card .album-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #1a1a1a;
}
.album-card .album-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s;
    display: block;
}
.album-card:hover .album-img-wrap img {
    transform: scale(1.06);
}
.album-card .album-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s;
}
.album-card:hover .album-overlay {
    background: rgba(0,0,0,.35);
}
.album-card .album-overlay i {
    color: #fff;
    font-size: 2rem;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .25s, transform .25s;
}
.album-card:hover .album-overlay i {
    opacity: 1;
    transform: scale(1);
}
.album-card .album-body {
    padding: .85rem 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
}
.album-card .album-body h6 {
    color: #fff;
    font-weight: 600;
    margin: 0 0 .2rem;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.album-card .album-body small {
    color: var(--pgs_primary_color, #c0392b);
    font-size: .8rem;
    font-weight: 500;
}
</style>
@endpush

@section('content')

{{-- Page heading --}}
<section class="pt-5 pb-0">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="text-white mb-0">Photo Gallery</h2>
            <div class="mt-3 mx-auto" style="width:60px;height:3px;background:var(--pgs_primary_color,#c0392b);border-radius:2px;"></div>
        </div>
    </div>
</section>

<section class="page-content">
    <div class="container">
        @if($albums->isEmpty())
            <div class="row">
                <div class="col-12"><p class="text-muted">No albums published yet.</p></div>
            </div>
        @else
            <div class="row g-4">
                @foreach($albums as $album)
                    @php $cover = $album->images->first(); @endphp
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12">
                        <a href="{{ route('site.gallery.album', $album) }}" class="album-card">
                            <div class="album-img-wrap">
                                <img src="{{ $cover ? asset('storage/' . $cover->image_path) : asset('website/images/home-02/gallery/01.jpg') }}" alt="{{ $album->title ?: ($album->year . ' Photos') }}">
                                <div class="album-overlay">
                                    <i class="fas fa-images"></i>
                                </div>
                            </div>
                            <div class="album-body">
                                <h6>{{ $album->title ?: ($album->year . ' Photos') }}</h6>
                                <small>{{ $album->year }}</small>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</section>
@endsection