@extends('layouts.frontend')

@section('title', 'Photo Gallery - Kidscholl Academy')

@section('content')
    <!-- Page Header -->
    <section class="page-header text-center">
        <div class="container">
            <h1 class="page-header-title">Photo Gallery</h1>
            <p class="lead text-muted">A sneak peek into our school life, activities, and campus celebrations.</p>
        </div>
    </section>

    <!-- Gallery Grid -->
    <section class="section-padding bg-white pt-0">
        <div class="container">
            <div class="row">
                @forelse($gallery as $item)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="kids-card card">
                            <img src="{{ $item->path_or_url }}" alt="{{ $item->title }}" class="img-fluid card-img-top" style="height: 250px; object-fit: cover;">
                            <div class="card-body bg-light text-center border-top">
                                <h5 class="card-title text-dark mb-0">{{ $item->title }}</h5>
                                <span class="badge bg-primary kids-badge mt-2">Campus Album</span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <i class="bi bi-images text-muted fs-1"></i>
                        <p class="text-muted mt-2">No photo gallery items uploaded yet.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection