{{--productListByKeyword--}}
@extends('shop::layouts.master')

@section('page_title')
    {{ __('shop::app.search.page-title') }}
@endsection

@push('css')
    <style type="text/css">
        .buy-nw {
            width: 100% !important;
        }
    </style>
@endpush

@section('content-wrapper')
    @if ($results && $results->count())
        <div class="filters-container col-12">
            @include ('shop::products.list.toolbar')
        </div>
    @endif

    <search-page-component :data="{{json_encode(@$results)}}"></search-page-component>
@stop

@push('scripts')
    <script type="text/x-template" id="search-page-template">
        <section class="row col-12 velocity-divide-page category-page-wrapper setCategoryListing">
            <div class="category-container p-0" style="width: 100%">
                <div class="category-block mt-3">
                    @if (@$results->total() == 1)
                        <h2 class="fw6 col-12 mb20">
                            {{@$results->total() }} {{ __('shop::app.search.found-result') }}
                        </h2>
                    @else
                        <h2 class="fw6 col-12 mb20">
                            {{ @$results->total() }} {{ __('shop::app.search.found-result') }}
                        </h2>
                    @endif
                    <shimmer-component v-if="isLoading && !isMobile()" shimmer-count="4"></shimmer-component>

                        <template v-else-if="products.length > 0">
                            <div v-if="!list" class="justify-content-center">
                                <div class="row col-12 remove-padding-margin justify-content-center">
                                    <template v-for="(product, index) in products">
                                        <product-card-component :list="list"
                                                                :product="product"></product-card-component>
                                    </template>
                                </div>
                            </div>
                            <div v-else class="product-list">
                                <template v-for="(product, index) in products">
                                    <product-card-component :list="list" :product="product"></product-card-component>
                                </template>
                            </div>
                            <div class="bottom-toolbar">
                                @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>
            </div>
        </section>
    </script>

    <script>
        Vue.component('search-page-component', {
            props: [
                'data'
            ],
            template: '#search-page-template',
            data: function () {
                return {
                    'products': [],
                    'isLoading': true,
                    'paginationHTML': '',
                    'list': this.isMobile(),
                }
            },
            mounted: function () {
                this.products = this.data.data;
                this.isLoading = false;
            },
            methods: {}
        })
    </script>
@endpush

@section('content-wrapper')--}}
{{--    <div class="container">--}}
{{--        <section class="search-container row">--}}
{{--            @if (! $results)--}}
{{--                <h1 class="fw6 col-12">{{  __('shop::app.search.no-products') }}</h1>--}}
{{--            @else--}}
{{--                @if ($results->isEmpty())--}}
{{--                    <h1 class="fw6 col-12">{{ __('shop::app.products.whoops') }}</h1>--}}
{{--                    <span class="col-12">{{ __('shop::app.search.no-products') }}</span>--}}
{{--                @else--}}
{{--                    @if ($results->total() == 1)--}}
{{--                        <h2 class="fw6 col-12 mb20">--}}
{{--                            {{ $results->total() }} {{ __('shop::app.search.found-result') }}--}}
{{--                        </h2>--}}
{{--                    @else--}}
{{--                        <h2 class="fw6 col-12 mb20">--}}
{{--                            {{ $results->total() }} {{ __('shop::app.search.found-result') }}--}}
{{--                        </h2>--}}
{{--                    @endif--}}

{{--                    <div class="row col-12 remove-padding-margin justify-content-center">--}}
{{--                        @foreach ($results as $product)--}}
{{--                            @include('shop::products.list.card', ['product' => $productFlat->product])--}}
{{--                        @endforeach--}}
{{--                    </div>--}}

{{--                        @include('ui::datagrid.pagination')--}}
{{--                    @endif--}}
{{--                @endif--}}

{{--                <pre-register></pre-register>--}}
{{--        </section>--}}
{{--    </div>--}}
{{--@endsection