@push('footer-javascript')
    <script src="/web/shella/scripts/cs/product-pagination.js"></script>
@endpush

<div class="collections js-collections pb-10">
    
    {{-- Breadcrumbs --}}
    <div data-js-collection-replace="breadcrumbs" data-js-collection-replace-only-full>
        <div class="breadcrumbs mt-15">
            <div class="mx-20">
                <ul class="list-unstyled d-flex text-lg flex-wrap align-items-center justify-content-center justify-content-lg-start">
                    <li class="text-md"><a href="/">{{ __('Home') }}</a></li>
                    <li class="text-md">
                        <a href="{{ $resource->productsPage() }}">
                            {{ __(class_basename($resource)) }}
                        </a>
                    </li>
                    <li class="text-md"><span>{{ $resource->name }}</span></li>
                </ul>
            </div>
        </div>
    </div>
    
    <div class="mt-10 mt-lg-25">
        <div class="row mb-40">
            <div class="collections__body col pb-25">
                <div data-js-collection-replace="head" data-js-collection-replace-only-full>
                    <div id="theme-section-collection-head" class="theme-section">
                        <div data-section-id="collection-head" data-section-type="collection-head">
                            <div class="collection-head">
                                <div class="mb-15">
                                    <h1 class="h3 mb-10 lg:d-none text-center text-lg-left">{{ $resource->name }}</h1>
                                </div>
                            </div>
                        </div>
                        <script>
                            Loader.require({
                                type: "script",
                                name: "collection_head"
                            });
                        </script>
                    </div>
                    <div id="theme-section-collection-body" class="theme-section mx-20">
                        <div data-section-id="collection-body" data-section-type="collection-body">
                            <div class="collection-body js-products-view">
                                <div class="collection-control mb-25 mb-lg-30">
                                    <div class="row">
                                        <div class="col-8 col-lg-4 d-flex d-lg-flex align-items-center">
                                            <div class="lg:d-none d-flex d-lg-flex mr-30">
                                                <div class="collection-control__button-sidebar d-flex align-items-center cursor-pointer js-popup-button text-uppercase" data-js-popup-button="sidebar">
                                                    <i class="mr-5">
                                                        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-084" viewBox="0 0 24 24">
                                                            <path d="M19.292 1.871c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439v2.5a.657.657 0 0 1-.039.225.499.499 0 0 1-.117.186l-5.469 6.074v6.641a.582.582 0 0 1-.078.293.823.823 0 0 1-.195.234l-3.75 2.5c-.052.026-.107.049-.166.068a.603.603 0 0 1-.479-.05c-.104-.052-.186-.127-.244-.225s-.088-.205-.088-.322v-9.14L3.823 5.406a.491.491 0 0 1-.117-.186.648.648 0 0 1-.039-.224v-2.5a.6.6 0 0 1 .186-.439.604.604 0 0 1 .439-.186h15zm-.625 2.89v-1.64H4.917v1.641l5.469 6.074a.507.507 0 0 1 .117.186.653.653 0 0 1 .039.225v8.203l2.5-1.66v-6.543c0-.078.013-.152.039-.225a.515.515 0 0 1 .117-.186l5.469-6.075z" />
                                                        </svg>
                                                    </i>
                                                    {{ __('Filter') }}
                                                </div>
                                            </div>

                                            <h1 class="d-none lg:block h3 mb-10 d-lg-block text-center text-lg-left">
                                                {{ $resource->name }}
                                            </h1>
                                        </div>
                                        <div 
                                            class="col-lg-3 d-none d-lg-flex justify-content-lg-center align-items-lg-center"
                                            data-js-collection-replace="info"
                                        >
                                            {{-- <div class="collection-control__information">
                                                Showing 1–12 of 42 results
                                            </div> --}}
                                        </div>
                                        <div class="col-4 col-lg-5 d-flex justify-content-lg-end align-items-center">
                                            @include('web.themes.shella.components.products.collection.sorting')
                                            @include('web.themes.shella.components.products.collection.pagination-select')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                @includeWhen($filtersEnabled, 'web.themes.shella.components.products.collection.filters.filters')

                <div id="theme-section-collection-body" class="theme-section">
                    
                    <div data-section-id="collection-body" data-section-type="collection-body">
                        <div class="collection-body js-products-view" id="products-container">
                            {{-- Products --}}
                            @include('web.themes.trendyol.components.products.collection.grid-products', [
                                'products' => $products
                            ])
                        </div>
                        
                        <div>
                            <div class="pagination" id="pagination-container">
                                <div class="d-flex justify-content-center mt-35">

                                    @if($products->nextPageUrl())
                                        <a href="{{ $products->nextPageUrl() }}" class="btn btn--secondary" id="pagination-next">
                                            <span class="text-uppercase">{{ __('Next') }}</span>
                                        </a>
                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                    <script>
                        Loader.require({
                            type: "script",
                            name: "collection_body"
                        });
                    </script>
                </div>
            </div>
        </div>
        <script>
            Loader.require({
                type: "script",
                name: "collections"
            });
        </script>
        <div id="theme-section-carousel-products" class="theme-section">
            <script>
                Loader.require({
                    type: "style",
                    name: "plugin_slick"
                });
                
                Loader.require({
                    type: "script",
                    name: "carousel_products"
                });
            </script>
        </div>
    </div>
</div>
