<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- Inject the comparison button in products cards -->
    <template
        id="website_sale_comparison.add_to_compare"
        inherit_id="website_sale.shop_product_buttons"
        name="Comparison List Button"
        priority="32"
    >
        <xpath expr="//div[hasclass('o_wsale_product_action_row')]" position="inside">
            <t
                t-set="isCompareAvailable"
                t-value="product and product.valid_product_template_attribute_line_ids"
            />

            <t t-if="isCompareAvailable" t-call="website_sale.product_tile_element_visibility">
                <t t-set="visible_element_class" t-value="'o_wsale_products_opt_has_comparison'"/>

                <t
                    t-set="attrib_categories"
                    t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"
                />
                <t t-set="product_variant_id" t-value="product._get_first_possible_variant_id()"/>
                <button
                    t-if="product_variant_id and attrib_categories"
                    type="button"
                    class="btn o_add_compare"
                    title="Compare"
                    aria-label="Compare"
                    t-att-data-product-template-id="product.id"
                    t-att-data-product-product-id="product_variant_id"
                    data-action="o_comparelist"
                >
                    <span class="fa fa-exchange fa-fw o_not-animable"/>
                    <span class="o_label small ms-2">Compare</span>
                </button>

            </t>
            <t t-else="" t-call="website_sale.product_tile_element_visibility">
                <!--
                    Render a placeholder to ensure alignment between entries with and without
                    comparison button
                -->
                <div class="o_add_compare_placeholder pe-none opacity-0 btn">
                    <span class="fa fa-exchange fa-fw"/>
                </div>
            </t>
        </xpath>
    </template>

    <template
        id="product_add_to_compare"
        name="Add to comparison in product page"
        inherit_id="website_sale.cta_wrapper"
        priority="8"
    >
        <xpath expr="//div[@id='product_option_block']" position="inside">
            <t t-set="attrib_categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
            <t t-set="product_variant_id" t-value="product._get_first_possible_variant_id()"/>
            <t
                t-set="_button_classes"
                t-valuef="o_add_compare_dyn btn btn-outline-primary order-last flex-grow-1 flex-sm-grow-0"
            />
            <t
                t-if="not is_view_active('website_sale_wishlist.product_add_to_wishlist') and not is_view_active('website_sale.cta_wrapper_default')"
                t-set="_button_classes"
                t-value="_button_classes + ' w-100'"
            />
            <t
                t-if="is_view_active('website_sale.cta_wrapper_large')"
                t-set="_button_classes"
                t-value="_button_classes + ' btn-lg px-lg-0'"
            />
            <button
                t-if="product_variant_id and attrib_categories"
                type="button"
                t-att-class="_button_classes"
                aria-label="Add to compare"
                title="Add to compare"
                t-att-data-product-product-id="product_variant_id"
                t-att-data-product-template-id="product.id"
                data-action="o_comparelist"
            >
                <span class="fa fa-exchange"/>
                <span t-att-class="'d-inline ms-2' + (' d-lg-none' if website.product_page_image_width == '50_pc' and not (is_view_active('website_sale.cta_wrapper_boxed') or is_view_active('website_sale.cta_wrapper_large')) or is_view_active('website_sale_wishlist.product_add_to_wishlist') else '')">Add to compare</span>
            </button>
        </xpath>
    </template>

    <template id="product_attributes_body" inherit_id="website_sale.product" name="Product attributes table">
        <xpath expr="//div[@id='product_attributes_simple']" position="replace"/>
        <xpath expr="//div[@id='product_full_description']" position="after">
            <t t-set="attrib_categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display_in_specs_table()"/>
            <t t-if="attrib_categories">
                <section class="pt32 pb32" id="product_full_spec">
                    <div class="container">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h3 class="m-0">Specifications</h3>
                        </div>
                        <div id="product_specifications">
                            <div class="row">
                                <t t-foreach="attrib_categories" t-as="category">
                                    <div class="col-lg-6">
                                        <t t-call="website_sale_comparison.specifications_table"/>
                                    </div>
                                </t>
                            </div>
                        </div>
                    </div>
                </section>
            </t>
        </xpath>
    </template>

    <template
        id="accordion_specs_item"
        name="Specifications Accordion Item"
        inherit_id="website_sale.product_accordion"
        active="False"
    >
        <xpath expr="//div[@id='more_information_accordion_item']" position="before">
            <t
                t-set="attrib_categories"
                t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display_in_specs_table()"
            />
            <t
                t-set="product_variant_id"
                t-value="product._get_first_possible_variant_id()"
            />
            <t t-if="product.valid_product_template_attribute_line_ids._prepare_categories_for_display_in_specs_table()">
                <t t-foreach="attrib_categories" t-as="category">
                    <div class="accordion-item">
                        <div class="accordion-header my-0 h6">
                            <button
                                t-out="category.name"
                                class="accordion-button collapsed fw-medium"
                                type="button"
                                data-bs-toggle="collapse"
                                t-attf-data-bs-target="#category_accordion_{{category_index}}"
                                aria-expanded="false"
                                aria-controls="specifications"
                            >
                                <t t-if="category_size == 1">Specifications</t>
                                <t t-else="">Others</t>
                            </button>
                        </div>
                        <div
                            t-attf-id="category_accordion_{{category_index}}"
                            class="accordion-collapse collapse"
                            data-bs-parent="#product_accordion"
                        >
                            <div class="accordion-body pt-0">
                                <t t-call="website_sale_comparison.specifications_table">
                                    <t t-set="is_accordion" t-value="True"/>
                                </t>
                            </div>
                        </div>
                    </div>
                </t>
            </t>
        </xpath>
    </template>

    <template id="specifications_table" name="Specifications Table">
        <table t-attf-class="table {{is_accordion and 'table-sm mb-0'}}">
            <t t-if="len(attrib_categories) > 1 and not is_accordion">
                <tr>
                    <th class="text-start" colspan="2">
                        <span t-if="category" t-field="category.name"/>
                        <span t-else="">Others</span>
                    </th>
                </tr>
            </t>
            <tr
                t-foreach="attrib_categories[category].filtered(lambda l: len(l.value_ids) > 1)"
                t-as="ptal"
            >
                <t
                    t-set="hide_border_bottom_classes"
                    t-value="'border-bottom-0' if ptal_last and is_accordion else ''"
                />
                <td t-attf-class="w-25 {{hide_border_bottom_classes}} ps-0">
                    <span t-field="ptal.attribute_id.name"/>
                </td>
                <td t-attf-class="w-75 {{hide_border_bottom_classes}} pe-0 text-muted text-end">
                    <t t-foreach="ptal.value_ids" t-as="pav">
                        <span t-field="pav.name"/><t t-if="not pav_last">, </t>
                    </t>
                </td>
            </tr>
            <t
                t-set="single_value_attributes"
                t-value="attrib_categories[category]._prepare_single_value_including_multi_type_for_display()"
            />
            <tr t-foreach="single_value_attributes" t-as="attribute">
                <t
                    t-set="hide_border_bottom_classes"
                    t-value="'border-bottom-0' if attribute_last and is_accordion else ''"
                />
                <td t-attf-class="w-25 {{hide_border_bottom_classes}} ps-0 ">
                    <span t-field="attribute.name"/>
                </td>
                <td t-attf-class="w-75 {{hide_border_bottom_classes}} pe-0 text-muted text-end">
                    <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>
        </table>
    </template>

    <template id="product_compare" name="Comparator Page">
        <t t-call="website.layout">
            <t t-set="additional_title">Shop Comparator</t>
            <div id="wrap" class="js_sale o_wsale_comparison_page">
                <div class="oe_structure oe_empty" id="oe_structure_website_sale_comparison_product_compare_1"/>
                <div t-attf-class="oe_website_sale o_wsale_comparison_page pb-5 #{website.shop_page_container == 'fluid' and 'container-fluid' or 'container'}">
                    <h1 class="h4 mt-4 mb-3">Compare Products</h1>

                    <!-- Mini sticky product overview (initially hidden) -->
                    <div
                        class="o_wsale_comparison_mini_sticky fixed-top d-none bg-body"
                        id="miniStickyComparison"
                    >
                        <div t-attf-class="px-3 #{website.shop_page_container == 'fluid' and 'container-fluid' or 'container'}">
                            <div class="o_wsale_comparison_scroll_container overflow-x-auto">
                                <ul class="list-unstyled d-flex align-items-stretch mb-0 py-3">
                                    <li
                                        t-foreach="products"
                                        t-as="product"
                                        class="o_wsale_compare_table_column flex-shrink-0"
                                    >
                                        <a
                                            t-att-href="product.website_url"
                                            class="d-flex align-items-center gap-2 text-decoration-none text-truncate"
                                        >
                                            <t
                                                t-set="combination_info"
                                                t-value="product._get_combination_info_variant()"
                                            />
                                            <div class="o_mini_product_img_container flex-shrink-0">
                                                <img
                                                    t-att-src="product._get_image_1024_url()"
                                                    class="img-fluid flex-shrink-0 w-100 h-100 rounded border object-fit-cover"
                                                    t-att-alt="combination_info['display_name']"
                                                />
                                            </div>
                                            <div class="text-truncate">
                                                <h6
                                                    class="flex-grow-1 text-truncate mb-0 small"
                                                    t-out="combination_info['display_name']"
                                                />
                                                <div
                                                    t-if="not combination_info['prevent_zero_price_sale']"
                                                    class="text-wrap"
                                                >
                                                    <small
                                                        class="mb-0 h6 text-body"
                                                        t-out="combination_info['price']"
                                                        t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                                    />
                                                    <del
                                                        t-if="combination_info.get('compare_list_price') and (combination_info['compare_list_price'] &gt; combination_info['price'])"
                                                        class="ms-1 mb-0 text-muted h6 small"
                                                        t-out="combination_info['compare_list_price']"
                                                        t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                                    />
                                                    <del
                                                        t-else=""
                                                        t-attf-class="ms-1 mb-0 text-muted h6 small {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
                                                        t-out="combination_info['list_price']"
                                                        t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                                    />
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <div
                            class="table-comparator position-relative"
                            id="o_comparelist_table"
                        >
                            <t
                                t-set="attrib_categories"
                                t-value="products._prepare_categories_for_display()"
                            />
                            <ul class="list-unstyled d-flex mb-0">
                                <li
                                    t-foreach="products"
                                    t-as="product"
                                    class="o_wsale_compare_table_column position-relative d-flex flex-column flex-shrink-0"
                                >
                                    <t
                                        t-set="combination_info"
                                        t-value="product._get_combination_info_variant()"
                                    />
                                    <a t-att-href="product.website_url">
                                        <img
                                            t-att-src="product._get_image_1024_url()"
                                            class="img img-fluid w-100 h-100 object-fit-cover border rounded"
                                            alt="Product image"
                                        />
                                    </a>
                                    <button
                                        t-att-data-product-product-id="product.id"
                                        class="o_comparelist_remove btn position-absolute top-0 end-0 mx-3 my-2 p-2 rounded-circle bg-white-75 lh-1"
                                        aria-label="Remove product from comparison"
                                    >
                                        <i class="oi oi-close"/>
                                    </button>
                                </li>
                            </ul>
                            <ul class="list-unstyled d-flex mb-0 pt-3 pb-5">
                                <li
                                    t-foreach="products"
                                    t-as="product"
                                    class="o_wsale_compare_table_column position-relative d-flex flex-column flex-shrink-0"
                                >
                                    <t
                                        t-set="combination_info"
                                        t-value="product._get_combination_info_variant()"
                                    />
                                    <div
                                        id="o_comparelist_product_name"
                                        class="product_summary d-flex flex-column h-100"
                                    >
                                        <a t-att-href="product.website_url">
                                            <h6 t-out="product.display_name"/>
                                        </a>
                                        <span t-if="not combination_info['prevent_zero_price_sale']">
                                            <span t-out="combination_info['price']"
                                                  t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"/>
                                            <del
                                                t-if="combination_info.get('compare_list_price') and (combination_info['compare_list_price'] &gt; combination_info['price'])"
                                                class="me-2 text-muted text-nowrap"
                                                t-out="combination_info['compare_list_price']"
                                                t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                            />
                                            <del
                                                t-else=""
                                                t-attf-class="text-muted me-2 text-nowrap {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
                                                t-out="combination_info['list_price']"
                                                t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                            />
                                            <small t-if="combination_info.get('base_unit_price')"
                                                   class="d-block text-muted">
                                                <t t-call="website_sale.base_unit_price">
                                                    <t t-set="base_unit_price" t-value="combination_info['base_unit_price']"/>
                                                </t>
                                            </small>
                                        </span>
                                        <div class="mt-auto pt-3">
                                            <a
                                                t-if="combination_info['prevent_zero_price_sale']"
                                                t-att-href="website.contact_us_button_url + '?subject=' + combination_info['display_name']"
                                                class="btn btn-primary btn_cta"
                                            >
                                               Contact Us
                                            </a>
                                            <button
                                                t-else=""
                                                name="comparison_add_to_cart"
                                                class="btn btn-primary"
                                                t-att-data-product-product-id="product.id"
                                                t-att-data-product-template-id="product.product_tmpl_id.id"
                                                t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                                            >
                                                <i class="fa fa-shopping-cart me-2" aria-hidden="true"/>Add to Cart
                                            </button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div t-foreach="attrib_categories" t-as="category">
                                <div class="w-100 py-3 bg-light bg-opacity-50">
                                    <h6 class="d-table position-sticky start-0 mb-0 ps-2">
                                        <span t-if="category" t-field="category.name"/>
                                        <t t-else="">Uncategorized</t>
                                    </h6>
                                </div>
                                <ul
                                    t-foreach="attrib_categories[category]"
                                    t-as="attribute"
                                    t-att-class="'list-unstyled d-flex mb-0 py-3 o_ws_category_%d %s' % (category.id, 'border-bottom' if not attribute_last else '')"
                                >
                                    <li
                                        t-foreach="attrib_categories[category][attribute]"
                                        t-as="product"
                                        class="o_wsale_compare_table_column d-flex flex-column flex-shrink-0"
                                    >
                                        <div id="o_comparelist_attribute">
                                            <t t-if="attrib_categories[category][attribute][product]">
                                                <div
                                                    class="small text-muted"
                                                    t-field="attribute.name"
                                                />
                                                <t
                                                    t-foreach="attrib_categories[category][attribute][product]"
                                                    t-as="ptav"
                                                >
                                                    <small t-field="ptav.name"/><t t-if="not ptav_last">, </t>
                                                </t>
                                            </t>
                                            <t t-else="">
                                                <div
                                                    class="small text-muted"
                                                    t-field="attribute.name"
                                                />
                                                <h6 class="small text-muted mb-0">-</h6>
                                            </t>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <t t-if="is_view_active('website_sale.product_tags') and any([product.all_product_tag_ids for product in products])">
                                <h6 class="d-table position-sticky start-0 mb-0">Tags</h6>
                                <ul class="list-unstyled d-flex border-bottom mb-0 py-3">
                                    <li
                                        t-foreach="products"
                                        t-as="product"
                                        class="o_wsale_compare_table_column d-flex flex-column align-items-center flex-shrink-0"
                                    >
                                        <div class="small text-muted">Tags</div>
                                        <t t-call="website_sale.product_tags">
                                            <t
                                                t-set="all_product_tags"
                                                t-value="product.all_product_tag_ids"
                                            />
                                        </t>
                                    </li>
                                </ul>
                            </t>
                        </div>
                    </div>
                </div>
                <div class="oe_structure" id="oe_structure_website_sale_comparison_product_compare_2"/>
                <div class="align-items-end bottom-0 d-flex end-0 justify-content-end o_not_editable p-0 position-absolute top-0 start-0 pe-none">
                    <div class="o_wsale_comparison_bottom_bar sticky-bottom flex-shrink-0 w-100 bg-body pe-auto">
                        <div t-attf-class="d-flex align-items-center py-3 #{website.shop_page_container == 'fluid' and 'container-fluid' or 'container'}">
                            <button
                                class="btn btn-link ps-0 text-decoration-none"
                                aria-label="Continue shopping"
                                name="comparison_back_button"
                            >
                                <i class="oi oi-chevron-left me-1"/> Back to shop </button>
                            <button
                                class="button btn btn-light ms-auto"
                                aria-label="Remove all products from comparison"
                                name="comparison_clear_all_button"
                            >
                                Remove all
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>

</odoo>
