<?xml version="1.0"?>
<t t-name="payment.pay">
        <!-- Parameters description:
            - reference_prefix: The custom prefix to compute the full transaction reference.
            - amount: The amount to pay.
            - currency: The currency of the payment, as a `res.currency` record.
            - partner_id: The id of the partner on behalf of whom the payment should be made.
            - payment_methods_sudo: The compatible payment methods, as a sudoed `payment.method`
                                    recordset.
            - tokens_sudo: The available payment tokens, as a sudoed `payment.token` recordset.
            - availability_report: The availability report of providers and payment methods.
            - res_company: The company in which the payment if made (for the company logo).
            - company_mismatch: Whether the user should make the payment in another company.
            - expected_company: The record of the company that the user should switch to.
            - partner_is_different: Whether the partner logged in is the one making the payment.
        -->
        <t t-call="portal.frontend_layout">
            <t t-set="page_title">Payment</t>
            <t t-set="additional_title"><t t-esc="page_title"/></t>
            <div class="wrap">
                <div class="container">
                    <!-- Portal breadcrumb -->
                    <t t-call="payment.portal_breadcrumb"/>
                    <!-- Payment page -->
                    <div class="row justify-content-center my-3">
                        <div class="col-lg-7">
                            <div t-if="not amount" class="alert alert-info">
                                There is nothing to pay.
                            </div>
                            <div t-elif="not currency" class="alert alert-warning">
                                <strong>Warning</strong> The currency is missing or incorrect.
                            </div>
                            <div t-elif="not partner_id" class="alert alert-warning">
                                <strong>Warning</strong> You must be logged in to pay.
                            </div>
                            <div t-elif="company_mismatch">
                                <t t-call="payment.company_mismatch_warning"/>
                            </div>
                            <t t-else="">
                                <div t-if="partner_is_different" class="alert alert-warning">
                                    <strong>Warning</strong> Make sure you are logged in as the
                                    correct partner before making this payment.
                                </div>
                                <div class="text-bg-light row row-cols-1 row-cols-md-2 mx-0 py-2                                             rounded">
                                    <t t-call="payment.summary_item">
                                        <t t-set="name" t-value="'amount'"/>
                                        <t t-set="label">Amount</t>
                                        <t t-set="value" t-value="amount"/>
                                        <t t-set="options" t-value="{'widget': 'monetary', 'display_currency': currency}"/>
                                    </t>
                                    <t t-call="payment.summary_item">
                                        <t t-set="name" t-value="'reference'"/>
                                        <t t-set="label">Reference</t>
                                        <t t-set="value" t-value="reference_prefix"/>
                                        <t t-set="include_separator" t-value="True"/>
                                    </t>
                                </div>
                                <div class="mt-4">
                                    <t t-call="payment.form"/>
                                </div>
                            </t>
                        </div>
                    </div>
                </div>
            </div>
        </t>
    </t>

    