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

    <template id="website_sale.product_compare" name="Comparator Page">
        <t t-call="website.layout" additional_title.translate="Shop Comparator">
            <div id="wrap" class="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 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['hide_price']"
                                                    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"
                        >
                            <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
                                        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"
                                        t-att-data-product-id="product.id"
                                    >
                                        <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['hide_price']">
                                            <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="'base_unit_price' in combination_info"
                                                   class="d-block text-muted">
                                                <t t-call="website_sale.base_unit_price"
                                                    base_unit_price="combination_info['base_unit_price']"/>
                                            </small>
                                        </span>
                                        <div class="mt-auto pt-3">
                                            <a
                                                t-if="combination_info['prevent_sale']"
                                                t-att-href="website._get_contact_us_url(combination_info['display_name'])"
                                                class="btn btn-primary btn_cta"
                                            >
                                               Contact Us
                                            </a>
                                            <button
                                                t-else=""
                                                name="add_to_cart"
                                                class="btn btn-primary"
                                                t-att-data-product-id="product.id"
                                                t-att-data-product-template-id="product.product_tmpl_id.id"
                                                t-att-data-product-type="product.product_tmpl_id.type"
                                                t-att-data-ptav-ids="json.dumps(product.product_template_attribute_value_ids.ids)"
                                                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" all_product_tags="product.all_product_tag_ids"/>
                                    </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'}">
                            <a
                                href="/shop"
                                class="btn btn-link ps-0 text-decoration-none"
                                aria-label="Continue shopping"
                            >
                                <i class="oi oi-chevron-left me-1"/> Back to shop
                            </a>
                            <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>
