<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="pos_online_payment.OnlinePaymentPopup">
        <div class="popup online-payment-popup">
            <main class="body">
                <div class="title">
                    Scan to Pay
                </div>
                <div class="instructions">
                    <p>Invite your customer to scan the QR code to pay: </p>
                    <img class="qr-code" t-att-src="props.qrCode" alt="QR Code to pay"/>
                </div>
                <div class="info">
                    <div><span>Amount: </span><span class="amount" t-esc="env.utils.formatCurrency(props.amount)"/></div>
                    <div><span>Order reference: </span><span t-esc="props.order.name"/></div>
                    <div><span>Order id: </span><span t-esc="props.order.server_id"/></div>
                </div>
            </main>
            <footer class="footer modal-footer">
                <div class="button cancel btn btn-lg" t-on-click="cancel">Cancel</div>
            </footer>
        </div>
    </t>
</templates>
