@extends('front.layouts.main')

@section('title', 'Beranda')

@section('content')

<!-- ======= Hero Section ======= -->
<section id="hero" class="single-page">

    <div class="container">
    <div class="row justify-content-center">
       <div class="col-lg-10 pt-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center">
          <div data-aos="zoom-out">
          <h1 class="text-center mt-0"><span>Galeri Video</span></h1>
        
          </div>
       </div>

    </div>
    </div>

    <svg class="hero-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28 " preserveAspectRatio="none">
    <defs>
       <path id="wave-path" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z">
    </defs>
    <g class="wave1">
       <use xlink:href="#wave-path" x="50" y="3" fill="rgba(255,255,255, .1)">
    </g>
    <g class="wave2">
       <use xlink:href="#wave-path" x="50" y="0" fill="rgba(255,255,255, .2)">
    </g>
    <g class="wave3">
       <use xlink:href="#wave-path" x="50" y="9" fill="#fff">
    </g>
    </svg>

 </section><!-- End Hero -->

 <section id="form" class="faq section-bg d-flex content-page">
    <div class="container mt-100 ptb-100">
        <div class="row">
            @foreach ($videos as $video)
            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-img-actions mx-1 mt-1">
                        <div class="card-img embed-responsive embed-responsive-16by9">
                            <iframe src="{{ $video->url }}" width="100%" height="300" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                        </div>
                    </div>
                    
                    <div class="card-body">
                        <h6 class="font-weight-bold text-truncate mb-0" style="max-width: 300px;" data-toggle="tooltip" title="" data-original-title="{{$video->title}}">{{$video->title}}</h6>
                    </div>
                </div>
            </div>
            @endforeach

        </div>
        {{ $videos->links() }}

        </div>
    </div>
</section>


@endsection