@extends('Frontend.Layout.app')

@php
    $seoTitle = data_get($category?->getTranslation('seo'), 'meta_title')
        ?? ($category?->getTranslation('name'))
        ?? translate('Videos');

    $seoDescription = data_get($category?->getTranslation('seo'), 'meta_description')
        ?? translate('Watch videos about ')
           . ($category?->getTranslation('name') ?? translate('life in Germany'))
           . translate(' for Arabs living in Germany.');


@endphp

@section('title', $seoTitle)
@section('meta_description', $seoDescription)


@section('og_title', $seoTitle)
@section('og_description', $seoDescription)

@section('content')
    <main>
        <section class="section">
            <div class="container">
                <div class="text-center">
                    <h2>{{$category?->getTranslation('name')}}</h2>
                </div>
                <br>
                <div class="row ">

                    @foreach($videos as $video)

                        <div class="col-md-4   mb-4">
                            <article class="card article-card my-2 p-0">
                                <a href="{{route('video.single',['slug'=>$video->getTranslation('slug')])}}">
                                    <div class="card-image">
                                        <div class="embed-responsive embed-responsive-16by9 rounded-lg">
                                            <iframe class="embed-responsive-item"
                                                    src="{{youtubeEmbedUrl($video->link)}}"
                                                    allowfullscreen></iframe>
                                        </div>
                                    </div>
                                </a>
                                <div class="card-body px-0 pb-1">
                                    <ul class="post-meta mb-2">
                                        <li><a> {{ $video->created_at->format('D M Y') }}</a>
                                            <a href="{{route('videos',['category'=>$video->category?->getTranslation('slug')])}}">{{$video->category?->getTranslation('name')}}</a>
                                        </li>
                                    </ul>
                                    <h3 class="px-1"><a class="post-title"
                                                        href="{{route('video.single',['slug'=>$video->getTranslation('slug')])}}">{{$video->getTranslation('name')}}</a>
                                    </h3>


                                </div>
                            </article>
                        </div>

                    @endforeach

                </div>
                <div class=" d-flex justify-content-center">
                    {{$videos->links()}}
                </div>
            </div>
        </section>
    </main>
@endsection