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

    <!-- Display of /pos/pay (the order of the if conditions matters)-->
    <template id="pay">
        <t t-call="portal.frontend_layout">
            <t t-set="page_title">Payment</t>
            <t t-set="additional_title">
                <t t-esc="page_title" />
            </t>
            <t t-set="no_footer" t-value="1"/>
            <t t-set="no_header" t-value="1"/>

            <div class="wrap">
                <div class="d-flex flex-column vh-100">
                    <div class="d-flex justify-content-between p-3 border-bottom border-top bg-light text-center">
                        <span class="order-reference fw-bolder" t-out="reference_prefix"/>
                        <span class="order-id text-muted"> Order ID: <t t-out="pos_order_id"/></span>
                    </div>
                    <div class="d-flex flex-column p-3">
                        <h4 class="d-flex gap-3 align-items-center mb-3 fs-6 small text-uppercase fw-bolder">
                            To Pay
                            <hr class="flex-grow-1 m-0"/>
                        </h4>
                        <span t-if="not currency" class="alert alert-danger m-0">
                            <strong>Error:</strong> The currency is missing or invalid.
                        </span>
                        <span t-elif="not amount" class="alert alert-info m-0">
                            There is nothing to pay.
                        </span>
                        <span t-else="">
                            <t t-call="pos_online_payment.pay_summary"/>
                            <t t-call="payment.form" />
                        </span>
                    </div>
                    <div class="d-grid p-3" t-if="exit_route">
                        <a role="button" class="btn btn-light btn-lg border py-3" t-att-href="exit_route">
                            Cancel payment
                        </a>
                    </div>
                </div>
            </div>
        </t>
    </template>

    <template id="pay_summary">
        <span id="o_pos_summary_amount"
                t-out="amount"
                t-options="{'widget': 'monetary', 'display_currency': currency}"
                class="fs-1 text-primary fw-bold"
        />
    </template>

    <!-- Display of /pos/pay/confirmation -->
    <template id="pay_confirmation">
        <t t-call="portal.frontend_layout">
            <t t-set="page_title">Payment Confirmation</t>
            <t t-set="additional_title">
                <t t-esc="page_title" />
            </t>
            <t t-set="no_footer" t-value="1"/>
            <t t-set="no_header" t-value="1"/>

            <div class="wrap">
                <div class="container d-flex flex-column vh-100 pb-3">
                    <div class="row flex-grow-1">
                        <div class="col mt-3">
                            <t t-if="state == 'error'">
                                <div class="alert alert-danger">
                                    <strong>Error:</strong> There was a problem during the payment process.
                                </div>
                            </t>
                            <t t-else="">
                                <t t-call="payment.state_header"/>
                                <div class="row row-cols-1 row-cols-sm-2">
                                    <t t-if="state == 'success'">
                                        <div class="col fw-bold">Amount</div>
                                        <div class="col mb-2 mb-lg-0 text-start text-sm-end" t-out="amount" t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                                    </t>

                                    <div class="col fw-bold">Order Reference</div>
                                    <div t-out="order_reference" class="col mb-2 mb-lg-0 text-start text-sm-end"/>

                                    <div class="col fw-bold">Transaction Reference</div>
                                    <div t-out="tx_reference" class="col mb-2 mb-lg-0 text-start text-sm-end"/>

                                    <div class="col fw-bold">Order ID</div>
                                    <div t-out="pos_order_id" class="col mb-2 mb-lg-0 text-start text-sm-end"/>
                                </div>
                            </t>
                        </div>
                    </div>
                    <div class="row g-2 row-cols-1 justify-content-between">
                        <div t-if="exit_route" class="col col-sm-auto me-auto">
                            <a role="button" t-att-class="'btn btn-lg w-100 ' + ('btn-primary' if state == 'success' else 'btn-light border')"  t-att-href="exit_route">
                                <t t-esc="'Continue' if state == 'success' else 'Cancel payment'"/>
                            </a>
                        </div>
                        <div t-if="pay_route and state != 'success'" class="col col-sm-auto ms-auto">
                            <a role="button" class="btn btn-primary btn-lg w-100" t-att-href="pay_route"
                                >
                                Try again
                            </a>
                        </div>
                    </div>
                    <div class="row" t-if="state == 'success'">
                        <div class="mb-3 text-muted text-center"> 
                            Processed by 
                            <t t-esc="provider_name"/>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </template>

</odoo>
