<?xml version="1.0"?>
<t name="Products" t-name="website_sale.products">
        <t t-call="website.layout">
            <t t-set="additional_title" t-value="category.name"/>
            <t t-set="grid_block_name">Grid</t>
            <t t-set="product_block_name">Product</t>

            <!-- Qweb variable defining the class suffix for navbar items.
                 Change accordingly to the derired visual result (eg. `primary`, `dark`...)-->
            <t t-set="navClass" t-valuef="light"/>

            <!-- Check for active options: the stored value may be used in sub-templates too  -->
            <t t-set="opt_wsale_fullwidth" t-value="is_view_active('website_sale.shop_fullwidth')"/>
            <t t-set="opt_wsale_categories" t-value="is_view_active('website_sale.products_categories')"/>
            <t t-set="opt_wsale_attributes" t-value="is_view_active('website_sale.products_attributes')"/>
            <t t-set="opt_wsale_filter_price" t-value="is_view_active('website_sale.filter_products_price')"/>
            <t t-set="opt_wsale_filter_tags" t-value="is_view_active('website_sale.filter_products_tags')"/>
            <t t-set="opt_wsale_design_grid" t-value="is_view_active('website_sale.products_design_grid')"/>

            <t t-set="opt_wsale_categories_top" t-value="is_view_active('website_sale.products_categories_top')"/>
            <t t-set="opt_wsale_attributes_top" t-value="is_view_active('website_sale.products_attributes_top')"/>
            <t t-set="opt_wsale_floating_bar" t-value="is_view_active('website_sale.floating_bar')"/>

            <t t-set="website_sale_pricelists" t-value="website.get_pricelist_available(show_visible=True)"/>
            <t t-set="website_sale_sortable" t-value="website._get_product_sort_mapping()"/>

            <t t-set="hasLeftColumn" t-value="opt_wsale_categories or opt_wsale_attributes"/>

            <t t-set="isFilteringByPrice" t-if="opt_wsale_filter_price" t-value="float_round(available_min_price, 2) != float_round(min_price, 2) or float_round(available_max_price, 2) != float_round(max_price, 2)"/>
            <t t-set="hasPricelistDropdown" t-value="website_sale_pricelists and len(website_sale_pricelists)&gt;1"/>
            <t t-set="isSortingBy" t-value="[sort for sort in website_sale_sortable if sort[0]==request.params.get('order', '')]"/>

            <t t-set="wsale_has_filters_btn" t-value="opt_wsale_categories or opt_wsale_attributes or opt_wsale_attributes_top"/>
            <t t-set="wsale_has_filters_btn_lg" t-value="opt_wsale_attributes_top"/>

            <div id="wrap" class="js_sale o_wsale_products_page">
                <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_products_1"/>
                <div id="o_wsale_container" t-attf-class="oe_website_sale                         {{opt_wsale_fullwidth and 'container-fluid o_wsale_page_fluid' or 'o_wsale_page_contained container'}}                         {{layout_mode == 'list' and 'o_wsale_layout_list' or 'o_wsale_layout_catalog'}}                         {{opt_wsale_categories_top and 'o_wsale_has_filmstrip'}}                         {{opt_wsale_floating_bar and 'o_wsale_has_floating_bar'}}                         {{hasLeftColumn and 'o_wsale_has_sidebar'}}                         {{editionPreviews and 'o_wsale_edit_preview_enabled'}}" t-attf-style="--o-wsale-products-grid-gap: {{gap}};" t-att-data-ppg="ppg" t-att-data-ppr="ppr" t-att-data-default-sort="website.shop_default_sort">
                    <div class="row o_wsale_products_main_row flex-nowrap">
                        <aside t-if="hasLeftColumn" id="products_grid_before" class="d-none d-lg-block position-sticky align-self-start col clearfix">
                            <div class="o_wsale_products_grid_before_rail vh-100 ms-n2 pt-2 px-lg-2 pb-lg-5 ps-2 overflow-y-scroll">
                                <t t-set="is_sidebar_collapsible" t-value="is_view_active('website_sale.products_categories_list_collapsible')"/>
                                <div t-if="opt_wsale_categories" t-att-class="'products_categories'                                                 + (' accordion accordion-flush' if is_sidebar_collapsible else ' mb-3')">
                                    <t t-call="website_sale.products_categories_list"/>
                                </div>
                                <t t-set="show_price_filter" t-value="opt_wsale_filter_price and opt_wsale_attributes"/>
                                <div t-if="attrib_values or tags or (                                         show_price_filter and isFilteringByPrice                                     )" class="py-3 border-bottom">
                                    <a t-att-href="keep(attribute_values=0, tags=0, min_price=0, max_price=0)" t-attf-class="btn btn-{{navClass}} d-flex align-items-center py-1" title="Clear Filters">
                                        <small class="mx-auto"><b>Clear Filters</b></small>
                                        <i class="oi oi-close" role="presentation"/>
                                    </a>
                                </div>
                                <div t-attf-class="products_attributes_filters d-empty-none {{opt_wsale_categories and 'border-top'}}"/>
                                <t t-if="show_price_filter" t-call="website_sale.filter_products_price">
                                    <t t-set="_classes" t-valuef="{{is_sidebar_collapsible and 'accordion accordion-flush'}} {{is_sidebar_collapsible and (opt_wsale_categories or len(attributes) &gt; 0) and 'border-top'}}"/>
                                </t>
                            </div>
                        </aside>
                        <div id="products_grid" t-attf-class="col">
                            <t t-set="_header_has_content" t-value="category or opt_wsale_categories_top or (not opt_wsale_floating_bar and (opt_wsale_attributes_top or is_view_active('website_sale.search') or is_view_active('website_sale.sort') or hasPricelistDropdown))"/>

                            <header id="o_wsale_products_header" t-attf-class="d-flex flex-column gap-2 {{_header_has_content and 'py-3' or (not _header_has_content and not opt_wsale_design_grid and 'py-3')}}">
                                <t t-if="category and not search" t-call="website_sale.products_breadcrumb">
                                    <t t-set="_classes" t-valuef="d-none d-lg-flex w-100 p-0 mb-0 small"/>
                                </t>
                                <h1 t-if="category or search" t-attf-class="d-flex gap-1 align-items-center mb-0 lh-lg {{search and 'base-fs font-sans-serif' or 'fs-3'}} {{search and bool(category) and 'mb-2'}}">
                                    <a t-if="(search and not category) or (not search and category)" t-attf-class="btn ps-0 pe-2 {{not search and 'd-lg-none'}}" t-att-href="keep('%s/category/%s' % (shop_path, slug(category.parent_id))) if category.parent_id else keep(shop_path, search=0)" role="button" t-attf-title="Back to {{category.parent_id and category.parent_id.name or 'Shop'}}">
                                        <i class="oi oi-arrow-left" role="img"/>
                                    </a>
                                    <t t-if="search and category">
                                        <span class="text-muted">Searching</span>
                                        <span class="badge text-bg-info fw-normal base-fs">
                                            <t t-esc="search"/>
                                            <a title="Clear search for this category" t-att-href="keep(search=0)" class="link-info">
                                                <i class="oi oi-close" role="img"/>
                                            </a>
                                        </span>
                                        <span class="text-muted">in</span>
                                        <span class="badge text-bg-primary fw-normal base-fs">
                                            <t t-esc="category.name"/>
                                            <a title="Search globally" t-att-href="keep(shop_path, search=search)">
                                                <i class="oi oi-close" role="img"/>
                                            </a>
                                        </span>
                                    </t>
                                    <span t-elif="search">
                                        <span class="text-muted">Search results for </span>'<strong t-esc="search"/>' <small t-if="search_count" class="text-muted"> (<t t-esc="search_count"/>)</small>
                                    </span>
                                    <t t-elif="category" t-esc="category.name"/>
                                </h1>
                                <h1 class="h4-fs" t-if="not category and not search">
                                    All products
                                </h1>
                                <t t-if="category">
                                    <t t-set="editor_msg">
                                        Drag building blocks here to customize the header for
                                        "<t t-esc="category.name"/>" category.
                                    </t>
                                    <div id="category_header" t-att-data-editor-message="editor_msg" t-field="category.website_description"/>
                                </t>
                                <t t-if="opt_wsale_categories_top" t-call="website_sale.filmstrip_categories"/>
                                <div t-if="not opt_wsale_floating_bar" class="products_header btn-toolbar flex-nowrap align-items-center justify-content-between gap-1 gap-lg-2 gap-xl-3">
                                    <t t-if="is_view_active('website_sale.search')">
                                        <t t-set="_has_all_sibligns" t-value="hasPricelistDropdown and is_view_active('website_sale.sort') and wsale_has_filters_btn"/>
                                        <!-- Desktop Search button -->
                                        <div t-attf-class="o_wsale_products_header_search_form_container {{ _has_all_sibligns and 'd-none d-sm-inline-block'}} col-xl-5 me-auto {{not hasLeftColumn and 'col-xl-6'}}" t-call="website_sale.search">
                                            <t t-if="category" t-set="placeholder">Search in <t t-out="category.name"/></t>
                                            <t t-set="search" t-value="original_search or search"/>
                                        </div>
                                        <!-- Mobile Search button -->
                                        <a t-attf-class="btn o_not_editable {{_has_all_sibligns and 'd-inline-block d-sm-none' or 'd-none'}} me-auto btn-{{navClass}}" data-bs-target="#o_wsale_search_modal" data-bs-toggle="modal" role="button" title="Search Products" href="#">
                                            <i class="oi oi-search" role="img"/>
                                        </a>
                                    </t>
                                    <t t-if="hasPricelistDropdown" t-call="website_sale.pricelist_list"/>
                                    <t t-if="is_view_active('website_sale.sort')" t-call="website_sale.sort"/>
                                    <button t-if="wsale_has_filters_btn" t-attf-class="btn btn-{{navClass}} position-relative {{not wsale_has_filters_btn_lg and 'd-lg-none'}} {{not is_view_active('website_sale.search') and 'ms-auto'}} text-nowrap" title="Filters" data-bs-toggle="offcanvas" data-bs-target="#o_wsale_offcanvas">
                                        <i class="oi oi-settings-adjust" role="img"/>
                                        <small t-attf-class="ms-1 {{(hasPricelistDropdown and is_view_active('website_sale.search') and is_view_active('website_sale.sort')) and 'd-none d-md-inline-block'}}">Filters</small>
                                        <span t-if="isFilteringByPrice or attrib_set or tags" t-attf-class="position-absolute top-0 start-100 translate-middle border border-{{navClass}} rounded-circle bg-danger p-1">
                                            <span class="visually-hidden">filters active</span>
                                        </span>
                                    </button>
                                </div>
                                <div t-if="original_search and products" class="alert alert-warning mt8">
                                    No results found for '<span t-esc="original_search"/>'. Showing results for '<span t-esc="search"/>'.
                                </div>
                            </header>

                            <div t-if="products" class="o_wsale_products_grid_table_wrapper">
                                <t t-set="grid_md_allow_custom_cols" t-value="hasLeftColumn"/>
                                <t t-set="grid_md_use_3col" t-value="(not hasLeftColumn and ppr == 4) or (opt_wsale_fullwidth and ppr &gt; 3)"/>

                                <section id="o_wsale_products_grid" t-attf-class="o_wsale_products_grid_table grid {{grid_md_allow_custom_cols and 'o_wsale_products_grid_table_md'}}" t-attf-style="--o-wsale-ppr: {{ppr}}; --o-wsale-ppg: {{ppg}}" t-att-data-name="grid_block_name">
                                    <t t-foreach="bins" t-as="tr_product">
                                        <t t-foreach="tr_product" t-as="td_product">
                                            <t t-if="td_product">
                                                <t t-set="col_height" t-value="td_product['y']"/>
                                                <t t-set="col_width" t-value="12 // ppr * td_product['x']"/>
                                                <t t-set="col_class" t-valuef="g-col-6"/>
                                                <t t-set="col_class_lg" t-value="'g-col-lg-' + str(col_width)"/>
                                                <t t-set="col_class_md" t-value="grid_md_allow_custom_cols and ('g-col-md-' + str(col_width)) or grid_md_use_3col and 'g-col-md-4' or 'g-col-md-6'"/>
                                                <t t-set="col_is_stretched" t-value="(td_product['x'] &gt;= td_product['y'] * 2)"/>
                                                <t t-set="col_is_custom_portrait" t-value="not col_is_stretched and (col_height &gt; td_product['x'])"/>
                                                <div t-attf-class="oe_product {{col_is_custom_portrait and 'oe_product_custom_portrait'}} {{col_class}} {{col_class_md}} {{col_class_lg}} {{col_is_stretched and 'oe_product_size_stretch'}}" t-attf-style="--o-wsale-products-grid-product-col-height: {{col_height}};" t-att-data-ribbon-id="td_product['ribbon'].id" t-att-data-colspan="td_product['x'] != 1 and td_product['x']" t-att-data-rowspan="td_product['y'] != 1 and td_product['y']" t-att-data-name="product_block_name">
                                                    <div t-attf-class="o_wsale_product_grid_wrapper position-relative h-100 o_wsale_product_grid_wrapper_#{td_product['x']}_#{td_product['y']}">
                                                        <t t-call="website_sale.products_item">
                                                            <t t-set="product" t-value="td_product['product']"/>
                                                        </t>
                                                    </div>
                                                </div>
                                            </t>
                                        </t>
                                    </t>
                                </section>
                            </div>
                            <div t-else="" class="text-center text-muted mt128 mb256">
                                <t t-if="not search">
                                    <h3 class="mt8">No product defined</h3>
                                    <p t-if="category">No product defined in this category.</p>
                                </t>
                                <t t-else="">
                                    <h3 class="mt8">No results</h3>
                                    <p>No results for "<strong t-esc="search"/>"<t t-if="category"> in category "<strong t-esc="category.display_name"/>"</t>.</p>
                                    <a t-if="category" t-att-href="keep(shop_path, search=search)" t-attf-title="Search {{search}} globally" class="d-block pb-5">
                                        Search globally
                                    </a>
                                </t>
                                <div t-ignore="true" groups="sales_team.group_sale_manager" class="alert alert-info d-inline-block mx-auto">
                                    Click <i>'New'</i> in the top-right corner to create your first product.
                                </div>
                            </div>
                            <div id="o_wsale_pager" t-attf-class="products_pager d-flex justify-content-center {{opt_wsale_design_grid and 'py-4' or 'py-5 pb-4'}}">
                                <t t-call="website.pager"/>
                            </div>
                            <t t-if="category">
                                <t t-set="footer_editor_message">
                                    Drag building blocks here to customize the footer for
                                    "<t t-esc="category.name"/>" category.
                                </t>
                                <div class="mb16" id="category_footer" t-att-data-editor-message="footer_editor_message" t-field="category.website_footer"/>
                            </t>
                        </div>
                    </div>

                    <t t-call="website_sale.o_wsale_offcanvas"/>
                </div>
                <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_products_2"/>
            </div>
            <div t-if="is_view_active('website_sale.search')" id="o_wsale_search_modal" class="modal fade css_editable_mode_hidden" aria-hidden="true" tabindex="-1">
                <div class="modal-dialog modal-lg pt-5">
                    <div class="modal-content mt-5 bg-transparent border-0">
                        <div class="o_container_small">
                            <t t-call="website.website_search_box_input">
                                <t t-set="default_style" t-valuef="true"/>
                                <t t-set="search_type" t-valuef="products"/>
                                <t t-set="_classes" t-valuef="input-group rounded o_cc o_cc1 mb-1"/>
                                <t t-set="_input_classes" t-valuef="border-0 p-3"/>
                                <t t-set="_submit_classes" t-valuef="px-4"/>
                                <t t-if="category" t-set="placeholder">Search in <t t-out="category.name"/></t>
                            </t>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </t>

    