@php $g_page = 'listing'; @endphp
@extends('frontend.layouts.amp')
@php
    if(isset($data['category']))
    {
        if(isset($data['category']->meta_title))
            $title = $data['category']->meta_title;
        else
            $title = $data['category']->name . ' - ' . app_name();
        if($data['category']->do_index == 'N' || $data['category']->status == 'N')
            $no_index = 'NOINDEX';
    }
    else
    {
        $title = '';
    }
    $video_tag = '';
    if(isset($data['category']))
    {
        $description = strip_tags($data['category']->description);
        //$description = str_ireplace('<iframe', '<amp-iframe', $description);
        //$description = str_ireplace('</iframe>', '</amp-iframe>', $description);
        if(strlen($description) > 150)
        {
            $full_description = $description;
            $description = substr($description, 0, 150) . ' ...';
        }
        if(trim($data['category']->video_link) != null)
        {
            if($data['category']->video_site == 'YouTube')
            {
                $amp_video_script = '<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>';
                $video_tag = '<amp-youtube width="480"
                              height="270"
                              layout="responsive"
                              data-videoid="'. $data['category']->video_link .'">
                            </amp-youtube>';
            }
            else
            {
                $amp_video_script = '<script async custom-element="amp-vimeo" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>';
                $video_tag = '<amp-vimeo data-videoid="'. $data['category']->video_link .'"
                              layout="responsive"
                              width="16"
                              height="9"></amp-vimeo>';
            }
        }
    }
@endphp
@if($data['listing_type'] == 'products_search')
    @section('title', 'Search Results for '.request()->input('s'))
@elseif(isset($data['category']))
    @php
        $title = trim($data['category']->meta_title);
        if($title != null && $title != 'NULL')
            $title = $data['category']->meta_title;
        else
            $title = $data['category']->name . ' - ' . app_name();
    @endphp
    @section('title', $title)
    @if(isset($data['category']->meta_description) && trim($data['category']->meta_description) != null && $data['category']->meta_description != 'NULL')
        @section('meta_description', $data['category']->meta_description)
        @section('meta_keywords', $data['category']->meta_keywords)
    @endif
    @if(trim($data['category']->video_link) != null)
        @push('head-area')
            {!! $amp_video_script !!}
        @endpush
    @endif
@endif
@if(isset($data['category']) && $data['category']->is_canonical == 'Y')
    @php
        if($data['category']->canonical_url != '')
            $url = $data['category']->canonical_url;
        else
            $url = URL::to( '/' . $data['category']->slug);
    @endphp
@else
    @php
        $url = URL::current();
    @endphp
@endif
@push('head-area')
    <link rel="canonical" href="{{ $url }}" />
    @if(isset($no_index))
        <META NAME="ROBOTS" CONTENT="{{ $no_index }}">
    @endif
@endpush
@section('content')
    <main id="content" role="main" class="main flex flex-wrap items-start pb5">
        {{-- @include('includes.partials.search-amp') --}}
        <article class="commerce-blog-wrapper col-12 md-col-8 px2 pt2 pb3 md-px4 md-pt6 md-pb7">
            <div class="mt1">
                <h1 class="h3">
                    @if($data['listing_type'] == 'products_search')
                        Search Results for "{{ request()->input('s') }}"
                    @elseif(isset($data['category']))
                        {{ $data['category']->name }}
                    @endif
                </h1>
                @if(isset($data['category']))
                    <div class="mt2" id="short_desc">
                        {!! nl2br($description) !!}
                    </div>
                    @if(isset($full_description))
                        <div class="mt2" hidden id="full_desc">
                            {!! nl2br($full_description) !!}
                        </div>
                        <p id="link_read_more">
                            <button on="tap:short_desc.hide,link_read_more.hide,link_read_less.show,full_desc.show">Show More</button>
                        </p>
                        <p id="link_read_less" hidden>
                            <button on="tap:short_desc.show,link_read_more.show,link_read_less.hide,full_desc.hide">Show Less</button>
                        </p>
                    @endif
                    {!! $video_tag !!}
                @endif
                {{--<div class="col-md-3 text-right">
                    <p class="pt-2">Showing {{ $data['products']->firstItem() }} to {{ $data['products']->lastItem() }}
                        of total {{ $data['products']->total() }} results</p></div>
                <div class="col-md-1 text-right">
                    {!! Form::open(array('route' => 'frontend.set-listing-limit', 'method' => 'POST', 'class' => 'mb-0')) !!}
                    {!! Form::select('listing_limit',
                            ['15' => '15', '30' => '30', '45' => '45', '60' => '60', '999' => 'All']
                            ,$data['listing_limit']
                            ,['class'=>'listing-limit', 'onchange' => 'this.form.submit();']) !!}
                    {!! Form::close() !!}
                </div>--}}
            </div>
        </article>
        <div class="col-12 md-col-8">
            <amp-list class="mx1 md-mxn1 paged-amp-list" src="{{ $data['api_endpoint'] }}" height="400" width="300" layout="responsive" binding="no" reset-on-refresh  single-item>
                {{--<p class="info">Page @{{currentPage}} of @{{pageCount}}</p>--}}
                <template type="amp-mustache">
                    <a href="@{{ link }}" target="_self" class="commerce-listing-product text-decoration-none inline-block col-6 md-col-4 lg-col-3 px1 mb2 md-mb4 relative">
                        <div class="flex flex-column justify-between">
                            <amp-img class="commerce-listing-product-image mb2" src="@{{image1}}" width="340" height="340" layout="responsive" alt="@{{ name }}" noloading=""><div placeholder="" class="commerce-loader"></div></amp-img>
                            <h2 class="commerce-listing-product-name h6">@{{ name }}</h2>
                            @{{ price }}
                        </div>
                    </a>
                </template>
            </amp-list>
        </div>
        {{--<div role="list" class="i-amphtml-fill-content i-amphtml-replaced-content" style="height: auto;">@if(isset($data['products']))
                @foreach($data['products'] as $product){!! \App\Models\Product::productBlock($product, 'product-list-amp', true) !!}@endforeach
            @else
                <p class="p-3">Sorry!, no products found.</p>
            @endif</div>--}}
    </main>
@endsection