@extends('frontend.layouts.amp')

@section('title', 'Blog - ' . app_name())

@push('head-area')
    <link rel="canonical" href="{{ URL::to('/blog') }}" />
    {{--<link rel="amphtml" href="{{ URL::to('/blog') }}?amp=1" />--}}
@endpush

@section('content')

    <!-- Cart Page Start -->

    <div class="cart_area cart-area-padding pt--35">
        <div class="container content-height">
            <div class="page-section-title">
                <h1>Blog</h1>
            </div>
            @if($data['posts'])

                <section class="mt--10">
                    <div class="container">
                        <div class="row2">
                            @foreach($data['posts'] as $post)

                                @php
                                    $link = '/blog/'.$post->slug;
                                    $image = '/up_data/blog/'.$post->image_thumbnail;
                                @endphp

                                <div class="col-xl-4 mb--30">
                                    <div class="blog-post">
                                        <a href="{{ $link }}" class="blog-image-gallery">
                                            <amp-img src="{{ $image }}" width="270" height="200" layout="responsive"
                                                     alt="{{ $post->heading_content }}" noloading="">
                                                <div placeholder="" class="commerce-loader"></div>
                                            </amp-img>
                                        </a>
                                        <div class="blog-content mt--15 text-center">
                                            <header>
                                                <div class="mt--5">
                                                    <h1 class="h3"><a href="{{ $link }}">{{ $post->name }}</a></h1>
                                                {{--<div class="post-meta">
                                                                                <span class="post-author">
                                                                                  <span class="text-gray">Posted by : </span>
                                                                                  admin
                                                                                </span>
                                                                                </div>--}}
                                            </header>
                                            <article>
                                                <h3 class="d-none sr-only">blob-article</h3>
                                                <p>{{ $post->short_content }}</p>
                                            </article>
                                            <div class="blog-btn pb--10 pt--10">
                                                <a href="{{ $link }}" class="btn btn-rounded btn-outlined--primary">Read
                                                    More</a>
                                            </div>

                                            <div class="blog-content mt--15 text-center">
                                            </div>
                                            @endforeach
                                        </div>
                                        <div class="mt--30">
                                            <div class="pagination-widget">
                                                <div class="site-pagination">
                                                    {!! $data['posts']->appends( request()->except('page') )->links() !!}
                                                </div>
                                            </div>

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

            @else
                <p><strong>Sorry!</strong>, no blog posts found.</p>

            @endif
        </div>
    </div>

@endsection