<?xml version="1.0"?>
<t name="Checkout layout page" t-name="website_sale.checkout_layout">
        <!-- Layout customization parameters:
            - show_footer: Whether to show the website footer; default: `False`.
            - show_navigation_button: Whether to show the navigation buttons; default: `True`.
            - show_wizard_checkout: Whether to show the wizard checkout; default: `True`.
            - show_shorter_cart_summary: Whether to show the shorter cart_summary (without items
                                         summary and with express checkout buttons) or the full;
                                         default: `None`.
            - show_mobile_cart_summary: Whether to show the mobile offcanvas cart_summary;
                                        default: `True`.
            - oe_structure: The structure element to append at the bottom of the page;
                            default: `None`.
        -->
        <!-- Checkout context (non exhaustive):
            - redirect: The route to redirect to when a customer enters a coupon; default: `None`.
            - website_sale_order: The current order.
        -->
        <t t-call="website.layout">
            <t t-set="no_footer" t-value="True if show_footer is None else not show_footer"/>
            <t t-set="show_navigation_button" t-value="True if show_navigation_button is None else show_navigation_button"/>
            <t t-set="expand_order_summary" t-value="not show_navigation_button"/>
            <t t-set="show_wizard_checkout" t-value="True if show_wizard_checkout is None else show_wizard_checkout"/>
            <t t-set="show_mobile_cart_summary" t-value="True if show_mobile_cart_summary is None else show_mobile_cart_summary"/>
            <t t-set="body_classname" t-value="'o_website_sale_checkout'"/>
            <div id="wrap" class="d-flex flex-column flex-grow-1">
                <div class="oe_website_sale o_website_sale_checkout_container container d-flex flex-column flex-grow-1 py-lg-2">
                    <div t-attf-class="row #{not show_wizard_checkout and 'mt32'} mb32">
                        <div t-if="show_wizard_checkout" class="col-12">
                            <t t-call="website_sale.wizard_checkout"/>
                        </div>
                        <!-- Checkout Page Content | Left Column -->
                        <div class="oe_clear_stucture oe_cart col-12 col-lg-7">
                            <t t-out="0"/>
                        </div>
                        <!-- Short Checkout Summary displayed on /cart | Right Column -->
                        <div t-if="show_shorter_cart_summary" class="offset-xxl-1 col-lg-5 col-xxl-4">
                            <div t-if="website_sale_order and website_sale_order.website_order_line" class="o_total_card card sticky-lg-top">
                                <div class="card-body p-0 p-lg-4" name="o_cart_total_card_body">
                                    <t t-call="website_sale.total">
                                        <t t-set="_cart_total_classes" t-valuef="o_checkout_cart_total pt-2 pt-lg-0"/>
                                    </t>
                                    <t t-call="website_sale.navigation_buttons"/>
                                </div>
                            </div>
                        </div>
                        <!-- Full Checkout Summary displayed on all checkout pages | Right Column -->
                        <div t-else="" class="d-none d-lg-block offset-xxl-1 col-12 col-lg-5 col-xxl-4 rounded">
                            <div class="o_total_card card sticky-lg-top mb-3 mb-lg-0">
                                <div class="card-body p-lg-4 pt-lg-3">
                                    <div class="d-none d-lg-block">
                                        <t t-call="website_sale.cart_summary_content"/>
                                        <t t-call="website_sale.total">
                                            <t t-set="_cart_total_classes" t-valuef="border-top pt-2"/>
                                        </t>
                                    </div>
                                    <div t-if="show_navigation_button" class="o_cta_navigation_container px-0">
                                        <t t-call="website_sale.navigation_buttons"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Mobile Order Summary | Bottom of page and Offcanvas -->
                    <t t-if="not show_shorter_cart_summary and show_mobile_cart_summary">
                        <div class="o_mobile_summary d-lg-none sticky-bottom mt-auto bg-body">
                            <button class="btn btn-light d-flex justify-content-between align-items-center gap-2 w-100 mb-2" data-bs-toggle="offcanvas" href="#o_cart_summary_offcanvas" role="button" aria-controls="o_cart_summary_offcanvas">
                                Order
                                <span id="amount_total_summary" class="monetary_field ms-auto" t-field="website_sale_order.amount_total" t-options="{&quot;widget&quot;: &quot;monetary&quot;, &quot;display_currency&quot;: website_sale_order.currency_id}"/>
                                <span class="o_cart_item_count badge ms-1 top-0 bg-primary" t-out="str(website_sale_order.cart_quantity)"/>
                                <i class="fa fa-angle-right ms-2" role="img"/>
                            </button>
                            <t t-if="show_navigation_button" t-call="website_sale.navigation_buttons"/>
                        </div>
                        <div id="o_cart_summary_offcanvas" class="offcanvas offcanvas-end" tabindex="-1" aria-labelledby="o_cart_summary_offcanvas">
                            <div class="offcanvas-body">
                                <t t-call="website_sale.cart_summary_content"/>
                            </div>
                            <div class="offcanvas-footer p-3">
                                <a href="/shop/cart" class="btn btn-link w-100">
                                    Coupon, Gift card, Promo-code?
                                </a>
                                <t t-call="website_sale.total">
                                    <t t-set="hide_promotions" t-value="True"/>
                                    <t t-set="_cart_total_classes" t-valuef="border-top px-3 pt-2 mx-n3"/>
                                </t>
                                <button class="btn btn-light w-100" type="button" data-bs-dismiss="offcanvas" aria-label="Close">
                                    Close
                                </button>
                            </div>
                        </div>
                    </t>
                </div>
                <!-- This is the drag-and-drop area for website building blocs at the end of each
                     checkout page. 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. -->
                <t t-out="oe_structure"/>
            </div>
        </t>
    </t>

    