@extends('frontend.layouts.amp')
@if($data['post']->meta_title != '')
    @section('title', $data['post']->meta_title)
@else
    @section('title', $data['post']->heading_content . ' - Blog - ' . app_name())
@endif
@section('meta_keywords', $data['post']->meta_keywords)
@section('meta_description', $data['post']->meta_description)
@push('head-area')
    <link rel="canonical" href="{{ URL::to('/blog/'.$data['post']->slug) }}" />
    {{--<link rel="amphtml" href="{{ URL::to('/blog/'.$data['post']->slug) }}?amp=1" />--}}
@endpush
@section('content')

    <section class="blog-page-section with-sidebar">
        <div class="container">
            <div class="row-blog">
                <div class="col-lg-8 col-xl-9 left-slide-margin">
                    <div class="blog-post post-details single-block">
                        <div class="blog-content">
                            <header>
                                <h3 class="blog-title">{{ $data['post']->heading_content }}</h3>
                                <div class="post-meta">
                                    <span class="post-date">
                                        <i class="far fa-calendar-alt"></i>
                                        <span class="text-gray">On : </span>
                                        {{ date('M d, Y', strtotime($data['post']->publish_date)) }}
                                        </span>
                                    </span>
                                </div>
                            </header>
                            @if($data['post']->image != '')
                                <div class="mb-4">
                                    @push('head-area')
                                        <link rel="preload" href="/up_data/blog/{{ $data['post']->image }}" as="image">
                                    @endpush
                                    <amp-img src="/up_data/blog/{{ $data['post']->image }}" class="img-fluid" width="345" height="186" alt="{{ $data['post']->heading_content }}"> </amp-img>
                                </div>
                            @endif
                            <article>
                                {!! Shortcode::compile($data['post']->full_content) !!}
                            </article>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-xl-3">
                    <div class="sidebar-widget">
                        @if($data['recent_posts'])
                            <div class="single-sidebar">
                                <h2 class="sidebar-title">RECENT POSTS</h2>
                                @foreach($data['recent_posts'] as $rp)
                                    <div class="text-center">
                                        <a href="/blog/{{ $rp->slug }}">
                                            @push('head-area')
                                                <link rel="preload" href="/up_data/blog/{{ $rp->image_thumbnail }}" as="image">
                                            @endpush
                                            <amp-img src="/up_data/blog/{{ $rp->image_thumbnail }}" title="{{ $rp->name }}" alt="{{ $rp->name }}" width="260" height="220"  class="img-fluid img-thumbnail"></amp-img>
                                        </a>
                                        <a href="/blog/{{ $rp->slug }}">{{ $rp->name }}</a>
                                    </div>
                                    <hr>
                                @endforeach
                                {{--<ul class="sidebar-list">
                                    @foreach($data['recent_posts'] as $rp)
                                    <li><a href="/blog/{{ $rp->slug }}">{{ $rp->name }}</a></li>
                                    @endforeach
                                </ul>--}}
                            </div>
                        @endif
                        <div class="single-sidebar">
                            {!! \App\Models\Banner::showBannerAmp(7, 'promo-image overflow-image') !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($data['has_youtube'] || $data['has_vimeo'])
        @push('head-area')
            @if($data['has_youtube'])
                <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
            @endif
            @if($data['has_vimeo'])
                <script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>
            @endif
        @endpush
    @endif

@endsection