{{#extend "base" hybrisClass="hybris-class" pageClass="products-list-page" title="Bathroom PLP" globalSearchV2="true" pagePlp=true}}
{{#content "head" mode="append"}}
    <link type="text/css" rel="stylesheet" href="./css/components/global-search.css">
{{/content}}
    {{#content "body"}}
        <main>
            <div class="package-plp container">
                <div class="page-header page-header_border-all">
                    <h1 class="page-header__title">
                        Bathroom Suite Packages
                    </h1>
                    {{> srp-injected}}
                </div>

                {{> quick-filter filterData=quickFilter.iconAndText_5}}

                <div class="package-plp__container">
                    <aside class="package__search-filter">
                        {{> search-filter collapsed="accordion_collapsed" hidden="hidden-state"}}
                    </aside>

                    <div class="package-plp__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="24 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="package-plp__cards">
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                            <div class="package-card"></div>
                        </div>

                        <div class="load-more-wrap">
                            <button class="btn btn-primary btn_full btn-load-more">
                                Load more
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </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/search-filter.min.js"></script>
        <script defer src="./js/plp-filters.min.js"></script>
        <script defer src="./js/page/quick-filter.js"></script>
    {{/content}}
{{/extend}}