@extends('website.layout.main')

@section('content')
    <!--Page Header Start-->
    <x-website-page-header title="{{__('messages.videos')}}" bgImage="assets/images/backgrounds/page-header-bg.png" homeLink="{{ url('/') }}" />
    <!--Page Header End-->

    <section class="projects-page">
        <div class="container">
            <div class="row">
                @forelse ($videos as $video)
                    @if($video->youtube_id)
                        <div class="col-xl-4 col-lg-6 col-md-6 mb-4">
                            <div class="projects-page__single">
                                <div class="video-embed-wrapper mb-2">
                                    <iframe src="https://www.youtube.com/embed/{{ $video->youtube_id }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                </div>
                                <h5 class="mt-2">{{ $video->title }}</h5>
                                <p class="text-muted small">{{ \Carbon\Carbon::parse($video->created_at)->format('M d, Y') }}</p>
                            </div>
                        </div>
                    @endif
                @empty
                    <div class="col-12">
                        <div class="text-center py-5">
                            <p class="text-muted">No videos yet. Add videos.</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection