<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="point_of_sale.FeedbackScreen">
        <div t-ref="feedback-screen" class="feedback-screen bg-100 fixed-top w-100 h-100 d-flex flex-column align-items-center justify-content-center" t-on-click="() => this.onClick()">
            <div style="width: 115px; height: 115px;">
                <t t-if="!this.state.loading">
                    <t t-call="point_of_sale.ValidationAnimation"/>
                </t>
            </div>

            <div class="amount-paid fw-bolder mt-2">
                <t t-if="this.state.loading">Processing...</t>
                <t t-else="">Amount Paid</t>
            </div>

            <div class="amount-container">
                <div t-ref="amount" class="amount lh-sm">
                    <PriceFormatter price="this.env.utils.formatCurrency(this.currentOrder.totalDue, false)"/>
                </div>
            </div>
            <div t-if="!ui.isSmall" class="desktop-format w-75 d-flex gap-3 flex-row align-items-center justify-content-around p-2">
                <button t-if="canPrintReceipt" t-att-disabled="state.loading || currentOrder.state == 'draft'" class="print-ticket-button button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.clickPrint()"><i class="fa fa-print" role="img" aria-label="Print" title="Print"></i> Print</button>
                <button t-if="canSendReceipt" t-att-disabled="state.loading || currentOrder.state == 'draft'" class="send-receipt button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.clickSend()"><i class="fa fa-paper-plane" role="img" aria-label="Send" title="Send"></i> Send Receipt</button>
                <button t-if="pos.canEditPayment(currentOrder)" t-att-disabled="state.loading" class="button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3 edit-order-payment" t-on-click.stop="() => this.clickEditPayment()"><i class="fa fa-pencil-square-o" role="img" aria-label="Edit" title="Edit"></i> Edit</button>
                <button t-att-disabled="state.loading" class="validation button btn btn-primary btn-lg lh-lg text-truncate flex-basis-25 py-3 rounded-3" t-on-click.stop="() => this.onClick(true)">
                    Continue
                    <div t-if="this.state.timeout" class="wipe-overlay"/>
                </button>
            </div>
            <div t-else="" class="mobile-format position-absolute bottom-0 w-100 d-flex flex-column gap-1 p-1">
                <div class="d-flex w-100 gap-1">
                    <button t-if="canSendReceipt" t-att-disabled="state.loading || currentOrder.state == 'draft'" class="send-receipt btn btn-secondary btn-lg lh-lg text-truncate flex-basis-50" t-on-click.stop="() => this.clickSend()">Send Receipt</button>
                    <button t-att-disabled="state.loading || currentOrder.state == 'draft'" class="print-ticket-button btn btn-secondary btn-lg lh-lg text-truncate flex-grow-1" t-on-click.stop="() => this.clickPrint()">Print</button>
                </div>
                <div class="d-flex w-100 gap-1">
                    <button t-if="pos.canEditPayment(currentOrder)" t-att-disabled="state.loading" class="back-button btn btn-secondary btn-lg lh-lg text-truncate flex-basis-50 edit-order-payment" t-on-click.stop="() => this.clickEditPayment()">Edit</button>
                    <button t-att-disabled="state.loading" class="validation button btn btn-primary btn-lg btn-lg lg-lh flex-grow-1" t-on-click.stop="() => this.onClick(true)">
                        Continue
                        <div t-if="this.state.timeout" class="wipe-overlay"/>
                    </button>
                </div>
            </div>
        </div>
    </t>
</templates>
