@extends('frontend.default.layouts.app')

@section('meta_title', 'Album: '.$album->title.' - '.getSetting('web_name', config('app.name')))
@section('meta_description', 'Galeri album '.$album->title)

@section('breadcrumbs')
    <div class="breadcrumbs panel z-1 py-2 bg-gray-25 dark:bg-gray-100 dark:bg-opacity-5 dark:text-white">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 m-0">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><i class="unicon-chevron-right opacity-50"></i></li>
                <li><span class="opacity-50">Album: {{ $album->title }}</span></li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    <div class="section panel overflow-hidden">
        <div class="section-outer panel py-6 lg:py-9">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4 lg:gap-6">
                    <header class="page-header vstack justify-center items-center gap-2 text-center max-w-650px mx-auto">
                        <h1 class="h3 md:h2 m-0">{{ $album->title }}</h1>
                        <p class="fs-6 opacity-70 m-0">Kumpulan galeri dari album {{ $album->title }}.</p>
                    </header>
                    <div class="row child-cols-6 md:child-cols-3 gx-2 gy-4 sm:gx-3 sm:gy-6">
                        @forelse ($gallerys as $gallery)
                            <div>
                                <article class="post type-post panel vstack gap-2">
                                    <figure class="featured-image m-0 ratio ratio-4x3 rounded uc-transition-toggle overflow-hidden bg-gray-25 dark:bg-gray-800">
                                        <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ asset('web-content/themes/default/assets/images/common/img-fallback.png') }}" data-src="{{ po_asset($gallery->picture) }}" alt="{{ $gallery->title ?: $album->title }}" data-uc-img="loading: lazy">
                                        <a href="{{ po_asset($gallery->picture) }}" class="position-cover" data-caption="{{ $gallery->title ?: $album->title }}"></a>
                                    </figure>
                                    <div class="post-header panel vstack gap-1">
                                        @if ($gallery->title)
                                            <h5 class="h6 md:h5 m-0">{{ $gallery->title }}</h5>
                                        @endif
                                        @if ($gallery->content)
                                            <div class="post-date hstack gap-narrow fs-7 opacity-60">
                                                <span>{{ \Illuminate\Support\Str::limit(strip_tags($gallery->content), 80) }}</span>
                                            </div>
                                        @endif
                                    </div>
                                </article>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="panel p-3 rounded border bg-white dark:bg-gray-900 dark:border-gray-700">Belum ada gambar dalam album ini.</div>
                            </div>
                        @endforelse
                    </div>
                    @include('frontend.default.partials.pagination', ['paginator' => $gallerys])
                </div>
            </div>
        </div>
    </div>
@endsection