@extends('layouts.frontend')

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

@section('content')
    <!-- Page Header -->
    <section class="page-header text-center">
        <div class="container">
            <h1 class="page-header-title">Video Gallery</h1>
            <p class="lead text-muted">Watch event highlights, student presentations, and school tours.</p>
        </div>
    </section>

    <!-- Videos Grid -->
    <section class="section-padding bg-white pt-0">
        <div class="container">
            <div class="row">
                @forelse($gallery as $item)
                    <div class="col-md-6 mb-4">
                        <div class="kids-card card">
                            <div class="ratio ratio-16x9">
                                <video controls preload="metadata">
                                    <source src="{{ $item->path_or_url }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                            <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-danger kids-badge mt-2"><i class="bi bi-play-fill"></i> Event Highlights</span>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <i class="bi bi-play-btn text-muted fs-1"></i>
                        <p class="text-muted mt-2">No videos uploaded to the gallery yet.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection