@extends('Frontend.Layout.app')
@php
    $seoTitle = data_get($article?->getTranslation('seo'), 'meta_title')
        ?? ($article?->getTranslation('name'))
        ?? translate('Page');

    $seoDescription = data_get($article?->getTranslation('seo'), 'meta_description')
        ?? translate('page about ')
           . ($article?->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="row">
                    <div class="col-lg-8 mb-5 mb-lg-0">
                        <article>
                            @if(isset($article->link))
                            <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
                                <iframe src="{{youtubeEmbedUrl($article->link)}}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" allowfullscreen title="YouTube Video"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            </div>
                            @else

                            <img loading="lazy" decoding="async" src="{{asset($article->image)}}" alt="{{$article->getTranslation('name')}}" class="w-100">

                            @endif
                            <ul class="post-meta mb-2 mt-4">
                                <li>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="margin-right:5px;margin-top:-4px" class="text-dark" viewBox="0 0 16 16">
                                        <path d="M5.5 10.5A.5.5 0 0 1 6 10h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5z" />
                                        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z" />
                                        <path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4z" />
                                    </svg> <span>{{$article->created_at->format('D M Y') }}</span>
                                </li>
                            </ul>
                            <h2 class="my-3">{{$article->getTranslation('name')}}</h2>
                            <ul class="post-meta mb-4">
                                <li> <a href="{{route($article->link? 'videos':'blog',['category'=>$article->category?->getTranslation('slug')])}}">{{$article->category?->getTranslation('name')}}</a>
                                </li>
                            </ul>
                                <div class="content  ">
                                    {!! $article->getTranslation('description') !!}
                                </div>
                        </article>

                    </div>
                    <div class="col-lg-4">
                        <div class="widget-blocks">
                            <div class="row">

                                <div class="col-lg-12 col-md-6">
                                    <div class="widget">
                                        <h2 class="section-title mb-3">{{translate('Recommended')}}</h2>
                                        <div class="widget-body">
                                            <div class="widget-list">
                                                @foreach($others as $other)
                                                    @if($loop->first)
                                                        <article class="card mb-4">
                                                            <div class="card-image">
                                                                <div class="post-info"><span class="text-uppercase"> {{ $other->category?->getTranslation('name') }}</span>
                                                                </div>
                                                                @if($other->link)
                                                                    <iframe class="embed-responsive-item"
                                                                            src="{{youtubeEmbedUrl($other->link)}}"
                                                                            allowfullscreen></iframe>                                                                @else
                                                                <img loading="lazy" decoding="async"
                                                                     src="{{asset($other->image)}}" alt="{{$other->getTranslation('name')}}"
                                                                     class="w-100">
                                                                @endif
                                                            </div>
                                                            <div class="card-body px-0 pb-1">
                                                                <h3><a class="post-title post-title-sm"
                                                                       href="{{route($other->type.'.single',['slug'=>$other->getTranslation('slug')])}}">{{$other->getTranslation('name')}}</a></h3>

                                                                <div class="content"><a class="read-more-btn"
                                                                                        href="{{route($other->type.'.single',['slug'=>$other->getTranslation('slug')])}}">{{translate('Read Full Article')}}</a>
                                                                </div>
                                                            </div>
                                                        </article>

                                                    @else

                                                        <a class="media align-items-center" href="{{route($other->type.'.single',['slug'=>$other->getTranslation('slug')])}}">
                                                            @if(!$other->link)

                                                                <img loading="lazy" decoding="async"
                                                                     src="{{asset($other->image)}}" alt="{{$other->getTranslation('name')}}"
                                                                     class="w-100">
                                                            @endif
                                                            <div class="media-body ml-3">
                                                                <h4 style="margin-top:-5px">{{$other->getTranslation('name')}}</h4>

                                                            </div>
                                                        </a>
                                                    @endif

                                                @endforeach

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @if(!empty($categories))
                                <div class="col-lg-12 col-md-6">
                                    <div class="widget">
                                        <h2 class="section-title mb-3">{{ translate('Categories') }}</h2>
                                        <div class="widget-body">
                                            <ul class="widget-list">
                                                @foreach($categories as $category)
                                                    <li>
                                                        <a href="{{ route('blog', ['category' => $category->getTranslation('slug')]) }}">
                                                            {{ $category->getTranslation('name') }}
                                                            <span class="ml-auto">({{ $category->blog_count }})</span>
                                                        </a>
                                                    </li>
                                                @endforeach

                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection