@extends('layouts.publik')

@section('content')
<div class="container py-5">
    <div class="mb-4">
        <h3 class="fw-bold text-success"><i class="fa-solid fa-images me-2"></i>GALERI KEGIATAN DESA</h3>
        <hr>
    </div>

    <div class="row">
        @forelse($galeri as $g)
        <div class="col-md-3 col-sm-6 mb-4">
            <div class="card shadow-sm border-0 h-100 overflow-hidden">
                <img src="{{ asset('storage/'.$g->gambar) }}" class="card-img-top w-100" style="height: 200px; object-fit: cover;" alt="{{ $g->judul }}">
                <div class="card-body p-3">
                    <p class="card-text text-truncate small fw-bold m-0">{{ $g->judul }}</p>
                    <small class="text-muted" style="font-size: 0.75rem;">{{ $g->created_at->format('d M Y') }}</small>
                </div>
            </div>
        </div>
        @empty
        <p class="text-center text-muted col-12 py-5">Belum ada dokumentasi foto di album galeri.</p>
        @endforelse
    </div>

    <div class="d-flex justify-content-center mt-3">
        {{ $galeri->links() }}
    </div>
</div>
@endsection