<?xml version="1.0"?>
<t name="Product" track="1" t-name="website_sale.product">
        <!-- 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"/>

        <t t-set="combination_info" t-value="product._get_combination_info()"/>
        <t t-set="product_variant" t-value="product.env['product.product'].browse(combination_info['product_id'])"/>
        <t t-set="is_fullwidth_content" t-value="website.product_page_image_width in ['none', '100_pc']"/>
        <t t-set="is_50_pc" t-value="website.product_page_image_width == '50_pc'"/>

        <t t-call="website.layout">
            <t t-set="additional_title" t-value="product.name"/>
            <div id="wrap" class="js_sale o_wsale_product_page">
                <div class="oe_structure oe_empty oe_structure_not_nearest" id="oe_structure_website_sale_product_1" data-editor-message.translate="DROP BUILDING BLOCKS HERE TO MAKE THEM AVAILABLE ACROSS ALL PRODUCTS"/>
                <section id="product_detail" t-attf-class="oe_website_sale container mt-4 mb-5 #{'discount'                             if combination_info['has_discounted_price'] else ''}" t-att-data-view-track="view_track and '1' or '0'" t-att-data-product-tracking-info="'product_tracking_info' in combination_info and json.dumps(combination_info['product_tracking_info'])">
                    <div class="d-flex flex-wrap align-items-center">
                        <div class="d-flex align-items-center flex-grow-1 mb-4 m-lg-0">
                            <ol class="o_wsale_breadcrumb breadcrumb m-0 p-0">
                                <li class="o_not_editable breadcrumb-item d-none d-lg-inline-block">
                                    <a t-att-href="keep(shop_path)">
                                        <i class="oi oi-chevron-left d-lg-none me-1" role="presentation"/>All Products
                                    </a>
                                </li>
                                <li t-nocache="The category does not have to be cached, as the product can be accessed via different paths." t-if="category" class="breadcrumb-item">
                                    <a class="py-2 py-lg-0" t-att-href="keep('%s/category/%s' % (shop_path, slug(category)))">
                                        <i class="oi oi-chevron-left d-lg-none me-1" role="presentation"/><t t-out="category.name"/>
                                    </a>
                                </li>
                                <li t-else="" class="o_not_editable breadcrumb-item d-lg-none">
                                    <a class="py-2 py-lg-0" t-att-href="keep(shop_path)">
                                        <i class="oi oi-chevron-left me-1" role="presentation"/>All Products
                                    </a>
                                </li>
                                <li class="breadcrumb-item d-none d-lg-inline-block active">
                                    <span t-field="product.name"/>
                                </li>
                            </ol>
                            <div class="d-flex d-md-none gap-2 ms-auto">
                                <t t-call="website_sale.pricelist_list"/>
                                <a t-attf-class="o_wsale_product_search_mobile_btn o_not_editable btn btn-{{navClass}} d-none" data-bs-target="#o_wsale_product_search_modal" data-bs-toggle="modal" role="button" title="Search Products" href="#">
                                    <i class="oi oi-search" role="img"/>
                                </a>
                            </div>
                        </div>
                        <div class="o_wsale_product_top_bar_desktop d-none d-md-flex flex-wrap gap-2 w-100 w-lg-auto mb-4 mb-lg-auto">
                            <t t-call="website_sale.pricelist_list"/>
                        </div>
                    </div>
                    <div class="row" id="product_detail_main" data-name="Product Page" t-att-data-image_width="website.product_page_image_width" t-att-data-image_layout="website.product_page_image_layout">
                        <t t-set="image_cols" t-value="website._get_product_page_proportions()"/>
                        <div t-attf-class="col-lg-#{image_cols[0]} mt-lg-4 o_wsale_product_images position-relative" t-if="website.product_page_image_width != 'none'" t-att-data-image-amount="len(product_variant._get_images() if product_variant else product._get_images())">
                            <t t-call="website_sale.shop_product_images"/>
                        </div>
                        <div t-attf-class="col-lg-#{image_cols[1]} mt-md-4" id="product_details">
                            <div t-attf-class="js_product js_main_product row position-sticky #{'o_wsale_product_sticky_col' if website.product_page_image_layout == 'grid' else ''}">
                                <div t-att-class="'col-lg-7' if is_fullwidth_content else 'col-lg-12'">
                                    <t t-set="base_url" t-value="website.get_base_url()"/>
                                    <h1 class="h3" t-field="product.name">Product Name</h1>
                                    <t t-if="is_view_active('website_sale.product_comment')">
                                        <a href="#o_product_page_reviews" class="o_product_page_reviews_link d-block mb-2 text-decoration-none">
                                            <t t-call="portal_rating.rating_widget_stars_static">
                                                <!-- sudo: product.product - visitor can access product average rating -->
                                                <t t-set="rating_avg" t-value="product.sudo().rating_avg"/>
                                                <t t-set="trans_text_plural">%s reviews</t>
                                                <t t-set="trans_text_singular">%s review</t>
                                                <t t-set="rating_count" t-value="(trans_text_plural if product.rating_count &gt; 1 else trans_text_singular) % product.rating_count"/>
                                            </t>
                                        </a>
                                    </t>
                                    <div t-field="product.description_ecommerce" t-attf-class="oe_structure text-muted {{not product.description_ecommerce and 'mb-0'}}" placeholder="A detailed, formatted description to promote your product on this page. Use '/' to discover more features."/>
                                    <t t-if="is_view_active('website_sale.product_tags')" t-call="website_sale.product_tags">
                                        <t t-set="all_product_tags" t-value="product_variant.all_product_tag_ids"/>
                                    </t>
                                    <form t-if="product._is_add_to_cart_possible()">
                                        <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" t-nocache="The csrf token must always be up to date."/>
                                        <div>
                                            <t t-if="not is_view_active('website_sale.cta_wrapper_boxed')" t-call="website_sale.product_price"/>
                                            <small t-if="combination_info.get('base_unit_price')" class="ms-1 text-muted o_base_unit_price_wrapper d-none">
                                                <t t-call="website_sale.base_unit_price">
                                                    <t t-set="base_unit_price" t-value="combination_info['base_unit_price']"/>
                                                </t>
                                            </small>
                                        </div>
                                        <t name="variant_info">
                                            <input type="hidden" class="o_not_editable product_id" name="product_id" t-att-value="product_variant.id"/>
                                            <input type="hidden" class="o_not_editable product_template_id" name="product_template_id" t-att-value="product.id"/>
                                            <input t-if="product.public_categ_ids.ids" type="hidden" class="product_category_id" name="product_category_id" t-att-value="product.public_categ_ids.ids[0]"/>
                                            <input type="hidden" name="product_type" t-att-value="product.type"/>
                                            <t t-call="website_sale.variants">
                                                <t t-set="ul_class" t-valuef="flex-column"/>
                                                <t t-set="parent_combination" t-value="None"/>
                                                <t t-set="combination" t-value="combination_info['combination']"/>
                                            </t>
                                        </t>
                                        <t t-if="not is_fullwidth_content" t-call="website_sale.cta_wrapper"/>
                                    </form>
                                    <p t-elif="not product.active" class="alert alert-warning">
                                        This product is no longer available.
                                    </p>
                                    <p t-else="" class="alert alert-warning">
                                        This product has no valid combination.
                                    </p>
                                    <t t-call="website_sale.product_accordion"/>
                                    <div id="contact_us_wrapper" t-attf-class="{{'d-flex' if combination_info['prevent_zero_price_sale'] else 'd-none'}} oe_structure oe_structure_solo #{_div_classes}">
                                        <section class="s_text_block" data-snippet="s_text_block" data-name="Text">
                                            <div class="container">
                                                <a t-att-href="website.contact_us_button_url" t-att-data-url="website.contact_us_button_url" class="btn btn-primary btn_cta">
                                                    Contact Us
                                                </a>
                                            </div>
                                        </section>
                                    </div>
                                    <div t-if="not is_view_active('website_sale_comparison.accordion_specs_item')" id="product_attributes_simple">
                                        <t t-set="single_value_attributes" t-value="product.valid_product_template_attribute_line_ids._prepare_single_value_for_display()"/>
                                        <table t-attf-class="table table-sm text-muted {{'' if single_value_attributes else 'd-none'}}">
                                            <t t-foreach="single_value_attributes" t-as="attribute">
                                                <tr>
                                                    <td>
                                                        <span t-field="attribute.name"/>:
                                                        <t t-foreach="single_value_attributes[attribute]" t-as="ptal">
                                                            <span t-field="ptal.product_template_value_ids._only_active().name"/>
                                                            <t t-if="not ptal_last">, </t>
                                                        </t>
                                                    </td>
                                                </tr>
                                            </t>
                                        </table>
                                    </div>
                                    <t t-set="product_documents" t-value="product.sudo().product_document_ids.filtered(lambda doc: doc.shown_on_product_page)"/>
                                    <div id="product_documents" class="my-4" t-if="product_documents">
                                        <h6>Documents</h6>
                                        <div class="list-group">
                                            <t t-foreach="product_documents" t-as="document_sudo">
                                                <t t-set="attachment_sudo" t-value="document_sudo.ir_attachment_id"/>
                                                <t t-set="target" t-value="attachment_sudo.type == 'url' and '_blank' or '_self'"/>
                                                <t t-set="icon" t-value="attachment_sudo.type == 'url' and 'fa-link' or 'fa-download'"/>
                                                <a class="list-group-item list-group-item-action" t-att-href="'/shop/' + slug(product) + '/document/' + str(document_sudo.id)" t-att-target="target">
                                                    <i t-att-class="'fa ' + icon + ' me-2'"/>
                                                    <t t-out="attachment_sudo.name"/>
                                                </a>
                                            </t>
                                        </div>
                                    </div>
                                    <t t-if="not is_fullwidth_content" t-call="website_sale.product_terms_and_conditions"/>
                                </div>
                                <div t-if="is_fullwidth_content" t-attf-class="col-lg-4 offset-lg-1">
                                    <div class="o_wsale_product_sticky_col position-sticky">
                                        <t t-call="website_sale.cta_wrapper"/>
                                        <t t-call="website_sale.product_terms_and_conditions"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <div id="product_full_description" t-field="product.website_description" class="oe_structure oe_empty mt16"/>
                <div class="oe_structure oe_empty oe_structure_not_nearest mt16" id="oe_structure_website_sale_product_2" data-editor-message.translate="DROP BUILDING BLOCKS HERE TO MAKE THEM AVAILABLE ACROSS ALL PRODUCTS"/>
            </div>
            <div id="o_wsale_product_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>

    