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

    <template id="website_sale.product_wishlist" name="Wishlist Page">
        <t t-call="website.layout" additional_title.translate="Shop Wishlist">
            <div id="wrap" class="o_wsale_wishlist_page">
                <div class="oe_structure" id="oe_structure_website_sale_wishlist_product_wishlist_1"/>
                <div class="container oe_website_sale">
                    <section class="container wishlist-section pb-5">
                        <div class="o_wishlist_products_header pt-4 pb-3">
                            <h1 class="h4-fs mb-0">My Wishlist</h1>
                        </div>
                        <div
                            id="empty-wishlist-message"
                            t-attf-class="w-100 #{'d-none' if wishes else ''}"
                        >
                            <div class="mt-5 mb-3">
                                <t t-call="website_sale.empty_wishlist_svg"/>
                            </div>
                            <h5 class="mb-3" style="text-align: center;">
                                Your wishlist is empty!
                            </h5>
                            <p style="text-align: center;">
                                <a href="/shop" class="btn btn-primary">
                                    Shop
                                </a>
                            </p>
                        </div>

                        <div
                            id="o_comparelist_table"
                            t-att-data-wishlist-grid-columns="website.wishlist_grid_columns"
                            t-att-data-wishlist-mobile-columns="website.wishlist_mobile_columns"
                            t-attf-style="--o-wsale-wishlist-grid-gap: {{website.wishlist_gap}};"
                            t-attf-class="o_wishlist_table grid table-comparator mb-5 {{website.wishlist_opt_products_design_classes}}"
                        >
                            <t t-foreach="wishes" t-as="wish">
                                <t t-set="product_variant" t-value="wish.product_id"/>
                                <t t-set="product" t-value="product_variant.product_tmpl_id"/>
                                <t t-set="product_href" t-value="product_variant.website_url"/>
                                <t t-set="combination_info" t-value="product_variant._get_combination_info_variant()"/>
                                <div
                                    class="o_wishlist_item"
                                    name="wishlist_item"
                                    t-att-data-wish-id="wish.id"
                                    t-att-data-product-id="product_variant.id"
                                >
                                    <t t-set="product_price">
                                        <br t-if="combination_info['hide_price']"/>
                                        <div t-else="" class="align-middle o_wish_price">
                                            <span aria-label="Sale price">
                                                <t t-out="combination_info['price']"
                                                    t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                                />
                                            </span>
                                            <small
                                                t-if="combination_info['has_discounted_price']"
                                                class="cart_product_base_unit_price text-muted"
                                            >
                                                <del
                                                    aria-label="Original price"
                                                    t-out="combination_info['list_price']"
                                                    class="text-nowrap"
                                                    t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                                    name="product_list_price"
                                                />
                                            </small>
                                        </div>
                                    </t>
                                    <t t-set="product_actions">
                                        <div class="o_wsale_product_action_row">
                                            <a
                                                t-if="combination_info['prevent_sale']"
                                                t-att-href="website._get_contact_us_url(combination_info['display_name'])"
                                                class="o_wsale_product_btn_primary btn btn-primary"
                                            >
                                                <span class="d-inline-flex align-items-baseline">
                                                    <i
                                                        class="fa fa-fw fa-envelope o_not-animable"
                                                        role="presentation"
                                                    />
                                                    <span class="o_label small ms-1">
                                                        Contact Us
                                                    </span>
                                                </span>
                                            </a>
                                            <button
                                                t-else=""
                                                name="add_to_cart"
                                                class="o_wsale_product_btn_primary btn btn-primary"
                                                t-att-data-product-id="product_variant.id"
                                                t-att-data-product-template-id="product.id"
                                                t-att-data-product-type="product.type"
                                                t-att-data-ptav-ids="json.dumps(product_variant.product_template_attribute_value_ids.ids)"
                                                t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                                            >
                                                <span class="d-inline-flex align-items-baseline">
                                                    <i
                                                        class="fa fa-fw fa-shopping-cart o_not-animable"
                                                        role="presentation"
                                                    />
                                                    <span class="o_label small ms-1">
                                                        Add to Cart
                                                    </span>
                                                </span>
                                            </button>
                                            <t t-if="is_view_active('website_sale.add_to_compare')">
                                                <button
                                                    t-if="product_variant and product._can_be_added_to_comparison()"
                                                    class="btn btn-light o_add_to_compare d-inline-flex"
                                                    aria-label="Add to compare"
                                                    t-att-data-product-id="wish.product_id.id"
                                                >
                                                    <i class="fa fa-fw fa-exchange" role="presentation"/>
                                                </button>

                                                <!-- Render placeholder when product is not comparable to ensure alignment -->
                                                <div t-else="" class="o_add_to_compare_placeholder btn btn-light pe-none opacity-0">
                                                    <i class="fa fa-exchange fa-fw" aria-hidden="true"/>
                                                </div>
                                            </t>
                                        </div>
                                    </t>
                                    <t
                                        t-set="extra_actions"
                                    >
                                        <button
                                            type="button"
                                            class="btn btn-light o_wish_rm z-3 rounded-pill lh-1"
                                            title="Remove from wishlist"
                                        >
                                            <i class="oi oi-close" role="presentation"/>
                                        </button>
                                    </t>
                                    <t t-call="website_sale.products_item"
                                        show_variations="False"
                                        show_ribbons="False"
                                        product_price="product_price"
                                        product_actions="product_actions"
                                        extra_actions="extra_actions"
                                        show_combination_name="True"
                                    />
                                </div>
                            </t>
                        </div>
                    </section>
                </div>
            </div>
        </t>
    </template>

</odoo>
