<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="pos_self_order.ConfirmationPage">
        <div t-if="this.state.onReload" class="self_order_success_loader position-absolute vh-100 w-100 d-flex justify-content-center align-items-center opacity-50 bg-dark o_self_fade">
            <div class="page-loader d-flex justify-content-center align-items-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        </div>
        <div t-else="" class="confirmation-page d-flex justify-content-center align-items-center flex-column h-100 p-3 text-center o_self_background" t-attf-style="background-image:#{selfOrder.kioskBackgroundImageUrl};background-size: cover; background-position: center;">
            <div class="o_confirmation_block d-flex flex-column align-items-center justify-content-center w-100 h-100">
                <div class="mb-4">
                    <h1 t-if="state.payment and selfOrder.config.self_ordering_pay_after !== 'each'" class="fw-bold" style="text-wrap: pretty;">
                        Hope you enjoyed your meal!
                    </h1>
                    <div t-else="" class="confirmation-block d-flex flex-column align-items-center gap-4" style="text-wrap: pretty;">
                        <t t-call="point_of_sale.ValidationAnimation"/>
                        <t t-if="confirmedOrder.preset_id?.use_timing and selfOrder.config.self_ordering_service_mode !== 'table'">
                            <t t-set="slotDate" t-value="confirmedOrder.preset_id.slotPrefix(confirmedOrder.preset_time) or confirmedOrder.preset_id.formatDate(confirmedOrder.preset_time)"/>
                            <h1 class="mb-0">Order for
                                <t t-if="slotDate"><t t-esc="slotDate"/>, </t>
                                <t t-esc="orderTimeStr"/>
                            </h1>
                        </t>
                        <t t-else="">
                            <h1 class="mb-0">We're preparing your order!</h1>
                        </t>
                    </div>
                </div>
                <div t-if="state.payment and confirmedOrder.state !== 'paid'"
                    class="px-4 py-3 m-n1 rounded-bottom rounded-4 border border-light bg-light text-body fw-bold" style="max-width: 95%; text-wrap: pretty;">
                    Pay
                    <t t-if="this.selfOrder.config.self_ordering_mode == 'kiosk' and this.selfOrder.models['pos.payment.method'].find((pm) => pm.is_cash_count)">
                        by cash
                    </t>
                    <t t-else="">
                        <span class="fw-bolder" t-esc="selfOrder.formatMonetary(confirmedOrder.amount_total || 0)"/>
                    </t>
                    at the counter
                </div>
                <div class="bg-white w-100 w-md-auto py-4 px-5 rounded-4 border border-light">
                    <h3 class="d-block text-muted">Your order number</h3>
                    <span class="tracking-number fw-bold lh-1 text-primary" t-esc="confirmedOrder.tracking_number" />
                </div>
            </div>
            <div class="d-flex flex-column align-items-center w-100 w-md-auto">
                <span role="button" t-if="selfOrder.showDownloadButton(confirmedOrder) and confirmedOrder.uiState.receiptReady" t-on-click="() => this.selfOrder.downloadReceipt(this.confirmedOrder)" class="mb-4 text-primary">
                    Download your receipt here
                </span>
                <button class="btn btn-lg btn-primary w-100 w-md-auto" t-on-click="backToHome">
                    <span t-if="!confirmedOrder?.uiState?.receiptReady" class="spinner-border"/>
                    <t t-elif="this.selfOrder.config.self_ordering_mode === 'kiosk'">Close</t>
                    <t t-else="">Ok</t>
                </button>
            </div>
        </div>
    </t>
</templates>
