{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page retail-media category-seo-config" title="Products list" globalSearchV2="true" pagePlp=true}}
{{#content "head" mode="append" pagePlp=true}}
<link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
{{/content}}
<style></style>
    {{#content "body"}}
        <main>
            <div class="container">
                <div class="page-header page-header_border-all">
                    <h1 class="page-header__title">
                        Fire Doors
                    </h1>
                    {{> srp-injected}}
                </div>

                {{> color-picker-plp }}

                <div class="row">
                    <aside class="left-aside">
                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                    </aside>

                    <div class="content">
                        <div class="plp-filters" data-component="plp-filters" aria-label="Product filters">
                            <div class="plp-filters__bar plp-filters__bar-mobile" role="tablist" aria-label="Filters">
                                {{> kitchen/mobile-nav-item
                                icon="fas fa-filter"
                                title="Filter by"
                                info="1,818 results"
                                modalId="filterModal"
                                mod="filter-modal-cta"
                                }}
                                {{> kitchen/mobile-nav-item
                                icon="fas fa-sort-alt"
                                title="Sort by"
                                info="Relevance"
                                dropdown=true
                                }}
                            </div>
                        </div>
                        <div class="sort-products-list">
                            {{> kitchen/sort-by }}
                        </div>

                        <div class="products-list products-list-v2">
                            {{#each search-result_v2.products}}
                                {{>card_product_v2}}
                            {{/each}}
                            {{#if search-result_v2.product-banner}}
                                {{#each search-result_v2.product-banner}}
                                    {{>card_product_banner_v2}}
                                {{/each}}
                            {{/if}}
                            {{#if search-result_v2.sponsor-banner}}
                                {{#each search-result_v2.sponsor-banner}}
                                    {{>card_sponsor_banner}}
                                {{/each}}
                            {{/if}}
                            {{#if search-result_v2.sponsor-product}}
                                {{#each search-result_v2.sponsor-product}}
                                    {{>card_sponsor_product}}
                                {{/each}}
                            {{/if}}
                        </div>
                        <div class="load-more-wrap">
                            <button class="btn btn-primary btn_full btn-load-more">
                                Load more
                            </button>
                        </div>
                    </div>
                    <!-- ./content -->
                </div>
            </div>
            {{> legal-info}}

            {{> similar-products-v2 }}

            {{> seo-widgets title="More products" }}
            {{> seo-widgets title="Related category" }}

        </main>
    {{/content}}
    {{#content "foot" mode="append"}}
    {{> kitchen/filter-modal isKitchenMode=false modalTitle="Filter by" }}
        <script defer src="./js/plp.bundle.min.js"></script>

        <script defer src="./js/page/plp-cards-v2.js"></script>
        <script defer src="./js/search-filter.min.js"></script>
        <script defer src="./js/plp-filters.min.js"></script>
    {{/content}}
{{/extend}}