{{#extend "base" hybrisClass="hybris-class" pageClass="page-responsiveThematicProductListPage products-list-page" title="Products list" pagePlp=true}}
    {{#content "head" mode="append" pagePlp=true}}
        <link type="text/css" rel="stylesheet" href="./css/components/plp-favourite-product.css">
    {{/content}}
    {{#content "body"}}
        <main>
            <div class="container">

                <div class="page-header page-header_border-all">
                    <h1 class="page-header__title">
                        Fire Doors
                    </h1>
                </div>

                {{> color-picker-plp }}

                <div class="row">
                    <aside class="left-aside">
                        {{> search-filter filterTitle="Filter results" collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
                        {{> search-filter-mobile collapsed="accordion_collapsed" hidden="hidden-state" fixed-height="custom-scroll"}}
                    </aside>

                    <div class="content">
                        <div class="sort-products-list">
                            <div class="sort-products-list__section sort-products-list__items-per-page">
                                <button class="btn btn-primary open-filters-btn" id="open-overlay">
                                   <span class="btn__text">
                                     <span class="icon"><span class="fas fa-filter"></span></span>Filter products
                                   </span>
                                </button>
                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-top" label="Products per page" label-hidden="true" placeholder="All products per page"}}
                            </div>
                            <div class="sort-products-list__section sort-products-list__pagination">
                                {{> pagination pagination1="true" }}
                                {{> pagination pagination2="true" }}
                            </div>
                            <div class="sort-products-list__section sort-products-list__sort-by">
                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d2" label="Sort by" label-hidden="true" placeholder="Name (descending)"}}
                            </div>
                        </div>

                        <div class="products-list products-list-v2">
                            {{#each search-result_v2.products}}
                                {{>card_product_v2 showFavourite="true"}}
                            {{/each}}
                        </div>

                        <div class="sort-products-list">
                            <div class="sort-products-list__section sort-products-list__items-per-page">
                                {{> form-row dropdown="true" ddn-mod="ddn_small" id="d1-bottom" label="Products per page" label-hidden="true" placeholder="All products per page"}}
                            </div>
                            <div class="sort-products-list__section sort-products-list__pagination">
                                {{> pagination pagination1="true" }}
                                {{> pagination pagination2="true" }}
                            </div>
                        </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"}}
        <script defer src="./js/page/plp.js"></script>

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