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

    <!-- Encapsulate the content in a `a` tag with a link to the product page. Override this
         template to change or remove the product link. Called in `website_sale.cart_lines`. -->
    <template id="website_sale.cart_line_product_link" name="Shopping Cart Line Product Link">
        <a
            t-if="line._is_sellable()"
            class="text-reset"
            t-att-href="line.product_id.website_url"
            name="o_cart_line_product_link"
        >
            <t t-out="0"/>
        </a>
        <t t-else="" t-out="0"/>
    </template>

    <!-- This template displays all the lines following the first one on the description of the sale
         order line, with a muted style. For typical products this content will be the product
         description_sale. Called in `website_sale.cart_lines`. -->
    <template id="website_sale.cart_line_description_following_lines" name="Shopping Cart Line Description Following Lines">
        <t t-set="description_lines" t-value="line.get_description_following_lines()"/>
        <div t-if="description_lines" class="text-muted small">
            <t t-foreach="description_lines" t-as="name_line">
                <span
                    t-if="name_line"
                    t-attf-class="d-block #{not name_line_last and 'mb-1'}"
                    t-out="name_line"
                />
            </t>
        </div>
    </template>

    <!-- Lines that show items in the cart. Called in `website_sale.cart`. -->
    <template id="website_sale.cart_lines" name="Shopping Cart Lines">
        <div
            t-if="not website_sale_order or not website_sale_order.website_order_line"
            class="js_cart_lines w-100"
        >
            <div class="mt-5 mb-3"><t t-call="website_sale.empty_cart_svg"/></div>
            <h5 class="mb-3" style="text-align: center;">
                Your cart is empty!
            </h5>
            <p style="text-align: center;">
                <a href="/shop" class="btn btn-primary">
                    Shop
                </a>
            </p>
        </div>
        <t t-if='website_sale_order'>
            <div t-if='website_sale_order._get_shop_warning(clear=False)' class="alert alert-warning js_cart_lines" role="alert">
                <strong>Warning!</strong>
                <div t-out="website_sale_order._get_shop_warning()" class="text-prewrap"/>
            </div>
        </t>
        <div id="cart_products"
             t-if="website_sale_order and website_sale_order.website_order_line"
             class="js_cart_lines d-flex flex-column mb32">
            <t t-foreach="website_sale_order.website_order_line" t-as="line">
                <t t-set="is_combo" t-value="line.product_type == 'combo'"/>
                <div
                    class="o_cart_product d-flex gap-3 pb-4"
                    t-attf-data-product-id="#{line.product_id and line.product_id.id}"
                >
                    <div
                        class="o_cart_product_image"
                    >
                        <!--
                            Unsellable lines can have unpublished products, but portal users have no
                            access to unpublished product images. To ensure product images are
                            always shown for unsellable lines, we use the raw image data as src
                            (which doesn't require access, unlike the image URL).
                        -->
                        <t t-call="website_sale.cart_line_product_link">
                            <img
                                t-if="not line._is_sellable() and line.product_id.image_128"
                                t-att-src="image_data_uri(line.product_id.image_128)"
                                class="img border rounded"
                                t-att-alt="line.name_short"
                            />
                            <div
                                t-else=""
                                t-field="line.product_id.image_128"
                                t-options="{
                                    'widget': 'image',
                                    'qweb_img_responsive': False,
                                    'class': 'border rounded',
                                }"
                            />
                        </t>
                    </div>
                    <div class="d-flex flex-column flex-grow-1 gap-3 min-w-0">
                        <div class="d-flex gap-3">
                            <div class="flex-grow-1 text-wrap w-100">
                                <div class="d-flex justify-content-between">
                                    <div class="d-md-flex flex-md-wrap column-gap-md-1 align-items-md-center">
                                        <t t-call="website_sale.cart_line_product_link">
                                            <h6
                                                t-out="line._get_line_header()"
                                                class="text-wrap mb-1"
                                            />
                                        </t>
                                        <t t-set="combination_name" t-value="line._get_combination_name()"/>
                                        <span t-if="combination_name" class="d-none d-md-inline h6 text-muted mb-1">-</span>
                                        <div
                                            t-if="combination_name or line.product_template_id._has_multiple_uoms()"
                                            class="d-inline-flex flex-wrap column-gap-2 row-gap-1 align-items-center my-1 my-md-0 w-100 w-md-auto"
                                        >
                                            <span
                                                t-if="combination_name"
                                                class="h6 text-muted mb-1"
                                                t-out="combination_name"
                                            />
                                            <span
                                                t-if="line.product_template_id._has_multiple_uoms()"
                                                class="badge bg-light mb-1"
                                                t-out="line.product_uom_id.name"
                                            />
                                        </div>
                                    </div>
                                    <div t-attf-class="{{'d-block d-md-none' if not is_combo else ''}}"><t t-call="website_sale.cart_lines_price"/></div>
                                </div>
                                <t t-call="website_sale.cart_line_description_following_lines"/>
                                <ul t-if="is_combo" class="list-group">
                                    <t
                                        t-foreach="line.linked_line_ids.filtered('combo_item_id')"
                                        t-as="combo_item_line"
                                    >
                                        <t t-call="website_sale.cart_combo_item_line"/>
                                    </t>
                                </ul>
                                <div
                                    name="o_wsale_cart_line_button_container"
                                    t-attf-class="d-none d-md-flex align-items-center gap-2 mt-2 {{'justify-content-between' if is_combo else ''}}"
                                >
                                    <button
                                        class="js_delete_product btn btn-link btn-sm p-0"
                                        aria-label="Remove from cart"
                                        title="Remove from cart"
                                    >
                                        Remove
                                    </button>
                                    <div t-if="is_combo" class="d-none d-md-block ms-auto"><t t-call="website_sale.cart_lines_quantity"/></div>
                                </div>
                            </div>
                            <div t-if="not is_combo" class="d-none d-md-block">
                                <t t-call="website_sale.cart_lines_price"/>
                                <div class="d-none d-md-block mt-2"><t t-call="website_sale.cart_lines_quantity"/></div>
                            </div>
                        </div>
                        <div
                            name="o_wsale_cart_line_button_container_mobile"
                            class="d-flex d-md-none"
                        >
                            <div class="d-flex d-md-none align-items-center me-auto">
                                <t t-call="website_sale.cart_lines_quantity" is_mobile="True"/>
                            </div>
                            <button
                                class="js_delete_product btn btn-link d-inline-block d-md-none px-2"
                                title="Remove"
                            >
                                <i class="fa fa-fw fa-trash-o"/>
                            </button>
                        </div>
                    </div>
                </div>
            </t>
        </div>
    </template>

    <template id="website_sale.cart_lines_quantity" name="Shopping Cart Line quantity">
        <t
            t-set="should_show_quantity_selector"
            t-value="is_view_active('website_sale.product_quantity')"
        />
        <div
            t-attf-class="css_quantity input-group justify-content-end h-100"
            t-attf-name="{{'website_sale_cart_line_quantity' if not is_mobile else 'website_sale_cart_line_quantity_mobile'}}"
        >
            <t t-if="should_show_quantity_selector and line._is_sellable()">
                <a
                    href="#"
                    class="btn btn-link d-inline-block border border-end-0"
                    aria-label="Remove one"
                    title="Remove one"
                >
                    <i class="oi oi-minus position-relative z-1"/>
                </a>
                <input
                    type="text"
                    class="js_quantity quantity form-control border border-start-0 border-end-0"
                    t-att-data-line-id="line.id"
                    t-att-data-product-id="line.product_id.id"
                    t-att-value="line._get_displayed_quantity()"
                />
                <t t-if="line._get_shop_warning(clear=False)">
                    <a href="#" class="btn btn-link">
                        <i
                            class="fa fa-warning text-warning"
                            t-att-title="line._get_shop_warning()"
                            role="img"
                            aria-label="Warning"
                        />
                    </a>
                </t>
                <a
                    t-else=""
                    href="#"
                    class="btn btn-link d-inline-block border border-start-0"
                    aria-label="Add one"
                    title="Add one"
                >
                    <i class="oi oi-plus position-relative z-1"/>
                </a>
            </t>
            <t t-else="">
                <input
                    type="text"
                    class="js_quantity quantity form-control text-start text-md-end border-0 p-0 shadow-none w-auto"
                    t-att-data-line-id="line.id"
                    t-att-data-product-id="line.product_id.id"
                    t-att-value="line._get_displayed_quantity()"
                    readonly="True"
                />
            </t>
        </div>
    </template>

    <template id="website_sale.cart_lines_price" name="Shopping Cart Line Price">
        <h6
            class="d-flex flex-column flex-md-row align-items-end align-items-md-start justify-content-md-end mb-1"
            name="website_sale_cart_line_price"
        >
            <del
                t-if="line._should_show_strikethrough_price()"
                class="me-md-2 text-muted text-nowrap opacity-50"
                t-out="line._get_displayed_unit_price() * line.product_uom_qty"
                t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
            />
            <t t-set="product_price" t-value="line._get_cart_display_price()"/>
            <t t-call="website_sale.cart_product_price"/>
        </h6>
        <small
            t-if="line._is_sellable() and line.env['res.groups']._is_feature_enabled('website_sale.group_show_uom_price') and line.product_id.base_unit_price"
            class="cart_product_base_unit_price d-block text-muted text-end"
            groups="website_sale.group_show_uom_price"
        >
            <t t-set="product" t-value="line.product_id"/>
            <t t-call="website_sale.base_unit_price"
                product="product"
                base_unit_price="product._get_base_unit_price(product_price/line.product_qty)"/>
        </small>
    </template>

    <template id="website_sale.cart_combo_item_line">
        <a
            t-att-href="combo_item_line.product_id.website_url if combo_item_line._is_sellable() and combo_item_line.product_id.website_published else '#'"
            t-attf-class="list-group-item #{'list-group-item-action' if combo_item_line._is_sellable() and combo_item_line.product_id.website_published else 'cursor-default text-decoration-none'}"
        >
            <h6 class="d-inline small">
                <span t-out="combo_item_line._get_displayed_quantity()"/>
                x
                <span t-out="combo_item_line.name_short"/>
            </h6>
            <t
                t-set="description_lines"
                t-value="combo_item_line.get_description_following_lines()"
            />
            <div t-if="description_lines" class="small text-muted">
                <t t-foreach="description_lines" t-as="description_line">
                    <span
                        t-if="description_line"
                        class="d-block"
                        t-out="description_line"
                    />
                </t>
            </div>
        </a>
    </template>

    <template id="website_sale.cart_product_price">
        <span
            t-out="product_price"
            style="white-space: nowrap;"
            t-options="{'widget': 'monetary', 'display_currency': website_sale_order.currency_id}"
        />
    </template>

    <!-- /shop/cart route -->
    <template id="website_sale.cart" name="Shopping Cart">
        <t t-set="oe_structure">
            <!-- This is the drag-and-drop area for website building blocs at the end of each
                 checkout page. This is append at the of the page in `checkout_layout`. The
                 templates created in the database to store blocs are hooked using XPath on the
                 `oe_struture` element ID. Therefore, we can't use dynamic IDs (like with
                 t-att-id) and each template needs to define a div element. -->
            <div class="oe_structure" id="oe_structure_website_sale_cart_2"/>
        </t>
        <t t-call="website_sale.checkout_layout"
            show_shorter_cart_summary="True"
            show_footer="True"
            oe_structure="oe_structure">
            <div id="shop_cart" class="col">
                <div class="d-flex align-items-center mb-3">
                    <h4 class="mb-0">Order summary</h4>
                    <div class="ms-3 border-start ps-2"><t t-call="website_sale.quick_reorder_button"/></div>
                </div>
                <div t-if="abandoned_proceed or access_token" class="alert alert-info mt8 mb8" role="alert"> <!-- abandoned cart choices -->
                    <t t-if="abandoned_proceed">
                        <p>Your previous cart has already been completed.</p>
                        <p t-if="website_sale_order">Please proceed your current cart.</p>
                    </t>
                    <t t-if="access_token">
                        <p>This is your current cart.</p>
                        <p>
                            <strong>
                                <a class="o_translate_inline" t-attf-href="/shop/cart/?id={{id}}&amp;access_token={{access_token}}&amp;revive_method=squash">Click here</a>
                            </strong> if you want to restore your previous cart. Your current cart will be replaced with your previous cart.
                        </p>
                        <p>
                            <strong>
                                <a class="o_translate_inline" t-attf-href="/shop/cart/?id={{id}}&amp;access_token={{access_token}}&amp;revive_method=merge">Click here</a>
                            </strong> if you want to merge your previous cart into current cart.
                        </p>
                    </t>
                </div>
                <t t-call="website_sale.cart_lines"/>
                <div class="clearfix" />
                <div class="oe_structure" id="oe_structure_website_sale_cart_1"/>
            </div>
        </t>
    </template>

    <template id="website_sale.quick_reorder_button">
        <t t-set="quick_reorder_button_title">
            <t t-if="request.website.is_public_user()">Login to reorder</t>
            <t t-elif="not order_history">No previous products available for reorder.</t>
        </t>
        <span t-att-title="quick_reorder_button_title">
            <button
                id="quick_reorder_button"
                type="button"
                class="btn btn-sm btn-link"
                data-bs-toggle="offcanvas"
                data-bs-target="#quick_reorder_sidebar"
                aria-controls="quick_reorder_sidebar"
                t-att-disabled="not order_history"
            >
                <i class="fa fa-rotate-left me-2"/>Quick reorder
            </button>
        </span>
        <t t-call="website_sale.quick_reorder_sidebar"/>
    </template>

    <template id="website_sale.quick_reorder_sidebar">
        <div
            id="quick_reorder_sidebar"
            class="offcanvas offcanvas-end"
            aria-labelledby="quick_reorder_sidebar"
        >
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Quick reorder</h5>
                <button
                    type="button"
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close"
                />
            </div>
            <div class="offcanvas-body">
                <!-- Parent element needed for proper JS side rendering -->
                <t t-if="order_history" t-call="website_sale.quick_reorder_history"/>
            </div>
        </div>
    </template>

    <template id="website_sale.quick_reorder_history">
        <div
            class="o_wsale_quick_reorder_line_group ps-sm-3"
            t-foreach="order_history"
            t-as="order_line_group"
        >
            <div class="o_wsale_quick_reorder_group_content d-flex gap-3 w-100 position-relative">
                <div
                    class="o_dot_line d-none d-sm-block position-absolute top-0 bottom-0 mb-1 border-start"
                />
                <span
                    class="o_dot d-none d-sm-block position-absolute translate-middle-x text-o-color-1"
                />
                <div class="w-100 ps-sm-4">
                    <h6 t-out="order_line_group['label']" class="mt-1 mb-3 text-muted"/>
                    <div
                        t-foreach="order_line_group['lines']"
                        t-as="order_line"
                        t-att-class="'o_wsale_quick_reorder_line d-flex flex-column flex-sm-row justify-content-between gap-3 '
                                      + ('align-items-start' if order_line.product_type == 'combo' else '')"
                    >
                        <div
                            t-att-class="'d-flex gap-2 ' + ('align-items-start' if order_line.product_type == 'combo' else 'align-items-center')"
                        >
                            <div class="o_cart_product_image">
                                <div
                                    t-field="order_line.product_id.image_128"
                                    t-options="{
                                        'widget': 'image',
                                        'qweb_img_responsive': False,
                                        'class': 'border rounded',
                                    }"
                                />
                            </div>
                            <div
                                class="d-flex flex-column align-items-start justify-content-center flex-grow-1 h-100"
                            >
                                <div>
                                    <h6
                                        t-out="order_line.name_short"
                                        t-att-class="'small ' + ('mb-2' if order_line.product_type == 'combo' else 'mb-0')"
                                    />
                                    <ul
                                        t-if="order_line.product_type == 'combo'" class="list-group"
                                    >
                                        <t
                                            t-foreach="order_line.linked_line_ids"
                                            t-as="combo_item_line"
                                            t-call="website_sale.cart_combo_item_line"
                                        />
                                    </ul>
                                </div>
                                <small
                                    t-if="order_line.product_template_id._has_multiple_uoms()"
                                    t-out="order_line.product_uom_id.name"
                                    class="badge mt-1 bg-light"
                                />
                            </div>
                        </div>
                        <div class="d-flex align-items-center ms-auto gap-2">
                            <t
                                t-set="combination_info"
                                t-value="order_line.product_id._get_combination_info_variant()"
                            />
                            <small
                                t-out="combination_info['price'] * order_line.product_uom_qty"
                                t-options="{
                                    'widget': 'monetary',
                                    'display_currency': website.currency_id,
                                }"
                                class="o_wsale_quick_reorder_product_price"
                                style="white-space: nowrap;"
                            />
                            <input
                                type="text"
                                t-att-value="int(order_line.product_uom_qty)"
                                class="o_wsale_quick_reorder_qty_input form-control text-center"
                                t-att-data-price-unit="combination_info['price']"
                                t-att-data-currency-digits="combination_info['currency'].decimal_places"
                            />
                            <button
                                type="button"
                                title="Press 'Enter' to add to cart"
                                class="o_wsale_quick_reorder_product_button btn btn-outline-primary"
                                t-att-data-quantity="order_line.product_uom_qty"
                                t-att-data-product-id="order_line.product_id.id"
                                t-att-data-product-template-id="order_line.product_id.product_tmpl_id.id"
                                t-att-data-product-type="order_line.product_id.type"
                                t-att-data-selected-combo-items="json.dumps(order_line._get_selected_combo_items())"
                            >
                                <i class="fa fa-cart-plus"/>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- Deactivatable through the website editor. -->
    <template
        id="website_sale.suggested_products_list"
        inherit_id="website_sale.cart_lines"
        name="Accessory Products in my cart"
    >
        <xpath expr="//div[@id='cart_products']" position="inside">
            <h5 t-attf-class="mt-3 mb-0" t-if="suggested_products">Suggested accessories</h5>
            <div t-if="suggested_products"
                 id="suggested_products"
                 class="d-flex flex-column align-items-stretch">
                <div
                    t-foreach="suggested_products"
                    t-as="product"
                    t-attf-class="d-flex gap-3 py-4 #{not product_last and 'border-bottom'}"
                    t-att-data-publish="product.website_published and 'on' or 'off'"
                >
                    <div class="o_cart_product_image">
                        <a t-att-href="product.website_url">
                            <div t-field="product.image_128" t-options="{'widget': 'image', 'qweb_img_responsive': False, 'class': 'border rounded'}"/>
                        </a>
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between">
                            <div>
                                <a class="text-reset" t-att-href="product.website_url">
                                    <h6
                                        class="align-top text-wrap"
                                        t-out="product.with_context(display_default_code=False).display_name"
                                    />
                                </a>
                                <div
                                    class="mb-2 small text-muted"
                                    t-field="product.description_sale"
                                />
                            </div>
                            <div class="d-flex flex-column gap-2 align-items-end">
                                <h6
                                    class="d-flex mb-0 text-end"
                                    name="suggested_product_price_container"
                                >
                                    <t
                                        t-set="combination_info"
                                        t-value="product._get_combination_info_variant()"
                                    />
                                    <del
                                        name="suggested_product_list_price"
                                        t-attf-class="me-2 text-nowrap text-muted {{'' if combination_info['has_discounted_price'] else 'd-none'}}"
                                        t-out="combination_info['list_price']"
                                        t-options="{'widget': 'monetary', 'display_currency': website.currency_id}"
                                    />
                                    <span
                                        name="suggested_product_price"
                                        class="text-nowrap"
                                        t-out="combination_info['price']"
                                        t-options="{'widget': 'monetary','display_currency': website.currency_id}"
                                    />
                                </h6>
                                <button
                                    name="add_to_cart"
                                    class="btn btn-primary text-nowrap"
                                    data-action="buy_now"
                                    t-att-data-product-id="product.id"
                                    t-att-data-product-template-id="product.product_tmpl_id.id"
                                    t-att-data-product-type="product.type"
                                    t-att-data-show-quantity="is_view_active('website_sale.product_quantity')"
                                >
                                    <i class="d-md-none fa fa-shopping-cart" role="presentation"/>
                                    <span class="d-none d-md-inline">Add to cart</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <template
        id="website_sale.product_cart_lines"
        inherit_id="website_sale.cart_lines"
        active="True"
    >
        <xpath expr="//div[@name='o_wsale_cart_line_button_container']/button" position="after">
            <t t-if="line._is_sellable()">
                <span class="text-300">|</span>
                <button
                    class="o_add_wishlist js_delete_product btn btn-link btn-sm p-0"
                    t-att-data-product-id="line.product_id.id"
                    t-att-data-product-template-id="line.product_id.product_tmpl_id.id"
                >
                    Save for Later
                </button>
            </t>
        </xpath>

        <xpath expr="//div[@name='o_wsale_cart_line_button_container_mobile']/button" position="before">
            <button
                t-if="line._is_sellable()"
                class="o_add_wishlist js_delete_product btn btn-link d-inline-block d-md-none px-2"
                t-att-data-product-id="line.product_id.id"
                t-att-data-product-template-id="line.product_id.product_tmpl_id.id"
                title="Wishlist"
            >
                <i class="fa fa-fw fa-heart-o"/>
            </button>
        </xpath>
    </template>

</odoo>
