@extends('frontend-v3.pages.layout')

@section('page')
    @include('frontend-v3.pages.partials.styles')

    <section class="v3-inner-hero">
        <div class="container">
            <div class="v3-eyebrow">Media Highlights</div>
            <h1 class="v3-title">Featured Videos</h1>
            <p class="v3-summary">Curated YouTube videos managed from the Kalakshetra admin panel.</p>
        </div>
    </section>

    <section class="v3-section">
        <div class="container">
            <div class="row g-4">
                @forelse ($records as $record)
                    <div class="col-12 col-md-6 col-lg-4">
                        <article class="v3-card">
                            @if ($record->youtube_embed_url)
                                <div class="ratio ratio-16x9">
                                    <iframe src="{{ $record->youtube_embed_url }}" title="{{ $localized($record, 'title') }}" allow="autoplay; encrypted-media; picture-in-picture" loading="lazy"></iframe>
                                </div>
                            @endif
                            <div class="v3-card-body">
                                <h2 class="v3-card-title">{{ $localized($record, 'title') }}</h2>
                                <p class="v3-muted">{{ str(strip_tags((string) $localized($record, 'description')))->limit(150) }}</p>
                            </div>
                        </article>
                    </div>
                @empty
                    <div class="col-12"><div class="v3-empty">No featured videos are published yet.</div></div>
                @endforelse
            </div>
            <div class="mt-5">{{ $records->links() }}</div>
        </div>
    </section>
@endsection