{{--productListByCategory--}}
@extends('shop::layouts.master')
@section('page_title')
    {{ $category->meta_title ?? $category->name }}
@stop

@section('seo')
    <meta name="description" content="{{ $category->meta_description }}"/>
    <meta name="keywords" content="{{ $category->meta_keywords }}"/>
@stop

@section('content-wrapper')
    <category-component :data="{{json_encode(@$results)}}"></category-component>
@stop

@push('scripts')
    <script type="text/x-template" id="category-template">
        <div id="ctm-product-listing" class="container-fluid">
            {!! view_render_event('bagisto.shop.fallback.index.before', ['category' => $category]) !!}
            @if (isset($category))
                <div id="ctm-product-breadcrum" class="row mb-2">
                    <div class="col-12">
                        {{ Breadcrumbs::render('category', $category) }}
                    </div>
                </div>

                <h1 class="categoryNameSeo" style="display: none;">The Imagine Store
                    - {{ $category->meta_title }}</h1>
            @endif

            @if (in_array(@$category->display_mode, ['products_and_description', 'description_only']))
                @if ($category->description)
                    {!! $category->description !!}
                @endif
            @endif

            <div class="row" v-bind:class="{'px-5': !isMobileView}">
                @if( in_array($category->display_mode, [null,'products_only','products_and_description']) )
                    <shimmer-component v-if="isLoading && !isMobileView" shimmer-count="4"></shimmer-component>

                    <template v-else-if="products.length > 0">
                        {{--                            <div class="filters-container col-12">--}}
                        {{--                            filter code do not delete--}}
                        {{--                                @include ('shop::products.list.toolbar')--}}
                        {{--                            </div>--}}
                        <div v-if="!list" class="justify-content-center col-12">
                            <template v-for="(product, index) in products">
                                <product-card-component :list="list" :product="product"></product-card-component>
                            </template>
                        </div>
                        <template v-else v-for="(product, index) in products">
                            <product-card-component :list="list" :product="product"></product-card-component>
                        </template>

                        <div class="row justify-content-center" style="display: contents">
                            @include('ui::datagrid.pagination')
                        </div>
                    </template>
                    <div class="product-list empty" v-else>
                        <h2>{{ __('shop::app.products.whoops') }}</h2>
                        <p>{{ __('shop::app.products.empty') }}</p>
                    </div>
            </div>
            @endif
        </div>
    </script>

    <script>
        Vue.component('category-component', {
            props: [
                'data'
            ],
            template: '#category-template',
            data: function () {
                return {
                    'products': [],
                    'isLoading': true,
                    'paginationHTML': '',
                    'isMobileView': this.$root.isMobile(),
                    // 'list': this.isMobile(),
                    'list': true,
                    {{--'list': '{{(request()->mode === 'list') ? true : false}}',--}}
                }
            },
            mounted: function () {
                this.products = this.data.data;
                this.isLoading = false;
            },
            methods: {}
        })
    </script>

    {{ Breadcrumbs::view('ReusableComponents.breadcrum-json-ld', 'category', $category) }}
    {{ \App\SEOSchema::view('listSchema',( in_array($category->display_mode, [null,'products_only','products_and_description']) ? ['category' => $category, 'products' => $results] : [] )) }}
@endpush