@php $g_page = 'listing'; @endphp
@extends('frontend.layouts.amp')
@php
    $title = trim($data['category']->meta_title);
    if($title != null && $title != 'NULL')
            $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';
    $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) . ' ...';
    }
    $video_tag = '';
    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
@section('title', $title)
@if(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
@if($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">{{ $data['category']->name }}</h1>
                <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 !!}
            </div>
        </article>
        <div class="col-12 md-col-8">
            <amp-list class="mx1 md-mxn1 paged-amp-list" src="api/search?cmd=amp-category&category_id={{ $data['category']->id }}" height="1000" 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="@{{image}}" 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>
                            @{{ description }}
                        </div>
                    </a>
                </template>
            </amp-list>
            {{--<div class="navigation">
                <button class="prev"
                        hidden
                        [hidden]="pageNumber < 2"
                        on="tap: AMP.setState({ pageNumber: pageNumber - 1 })">
                    Previous
                </button>
                <button class="next"
                        [hidden]="page ? pageNumber >= page.items.pageCount : false"
                        on="tap: AMP.setState({ pageNumber: pageNumber ? pageNumber + 1 : 2 })">
                    Next
                </button>
            </div>--}}
            {{--<amp-state id="page"
                        src="search"
                        [src]="'search?page=' + pageNumber">
            </amp-state>--}}
        </div>
        {{--<div role="list" class="i-amphtml-fill-content i-amphtml-replaced-content" style="height: auto;">@foreach($data['categories'] as $category){!! \App\Models\Category::categoryBlockFlex($category, 'amp') !!}@endforeach</div>--}}
    </main>
@endsection