@extends('vendor.site-bases.website.layouts.master')

@section('title', trans('title.videos'))

@section('page_title', trans('title.videos'))

@section('breadcrumbs')
    {!! Breadcrumbs::render('videos') !!}
@endsection

@section('content')
    <div class="video_gallery container">
        @foreach ($videos as $item)
            <div class="video_cont">
                <div class="video" data-url="{{ $item->video_url }}">
                    <img src="{{ asset($item->thumb) }}" alt="">
                    <div class="overlay">
                        <div class="play_button">
                            <span>
                                <img src="{{ asset('assets/client/images/play.svg') }}" alt="">
                            </span>
                        </div>
                    </div>
                </div>
                <h3>{{ $item->title }}</h3>
            </div>
        @endforeach
    </div>
    <div class="video_modal">
        <div class="bg"></div>
        <div class="video_in">
            <iframe width="100%" height="100%" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen autoplay></iframe>
        </div>
        <div class="close">
            <svg xmlns="http://www.w3.org/2000/svg" id="prefix__Group_33" data-name="Group 33" viewBox="0 0 24 24">
                <path id="prefix__Path_110" d="M0 0h24v24H0z" data-name="Path 110" style="fill:none"></path>
                <path id="prefix__Path_111" d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z" data-name="Path 111"></path>
            </svg>
        </div>
    </div>
    <div class="pagination">
        {{ $videos->appends(request()->except('page'))->links() }}
    </div>
@endsection