<?xml version="1.0"?>
<t name="Payment Form" t-name="payment.form">
        <!-- Form customization parameters:
            - mode: The operation mode of the form: `payment` or `validation`; default: `payment`.
            - allow_token_selection: Whether tokens can be selected for payment or assignation
                                     (through the `assign_token_route` parameter); default: `True`.
            - allow_token_deletion: Whether tokens can be deleted (archived); default: `False`.
            - default_token_id: The id of the token that should be pre-selected; default: `None`.
            - show_tokenize_input_mapping: For each provider, whether the tokenization checkbox is
                                           shown; used only in `payment` mode.
            - display_submit_button: Whether the submit button is displayed; default: `True`.
            - submit_button_label: The label of the submit button; default: 'Pay'/'Save'.
        -->
        <!-- Payment context:
            - 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.
            - providers_sudo: The compatible providers, as a sudoed `payment.provider` recordset.
            - 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.
            - transaction_route: The route to call to create the transaction.
            - assign_token_route: The route to call to assign a new or existing token to a record.
            - landing_route: The route the user is redirected to after payment.
            - access_token: The access token used to authenticate the partner.
        -->
        <t t-set="mode" t-value="mode or 'payment'"/>
        <t t-set="allow_token_selection" t-value="True if allow_token_selection is None else allow_token_selection"/>
        <t t-set="allow_token_deletion" t-value="allow_token_deletion or False"/>
        <t t-set="selected_token_id" t-value="allow_token_selection and (default_token_id or tokens_sudo[:1].id)"/>
        <t t-set="selected_method_id" t-value="not selected_token_id                     and len(payment_methods_sudo) == 1                     and payment_methods_sudo[:1].id"/>
        <t t-set="collapse_payment_methods" t-value="tokens_sudo and allow_token_selection and payment_methods_sudo"/>
        <t t-set="display_submit_button" t-value="True if display_submit_button is None else display_submit_button"/>
        <t t-set="pay_label">Pay</t> <!-- Allow translating the label. -->
        <t t-set="save_label">Save</t> <!-- Allow translating the label. -->
        <t t-set="submit_button_label" t-value="submit_button_label or (pay_label if mode == 'payment' else save_label)"/>
        <form t-if="payment_methods_sudo or tokens_sudo" id="o_payment_form" class="o_payment_form" t-att-data-mode="mode" t-att-data-reference-prefix="reference_prefix" t-att-data-amount="amount" t-att-data-currency-id="currency and currency.id" t-att-data-partner-id="partner_id" t-att-data-transaction-route="transaction_route" t-att-data-assign-token-route="assign_token_route" t-att-data-landing-route="landing_route" t-att-data-access-token="access_token">
            <div id="o_payment_form_options" class="d-flex flex-column gap-3">
                <!-- === Payment tokens === -->
                <div t-if="tokens_sudo">
                    <!-- === Header === -->
                    <h4 id="o_payment_tokens_heading" class="fs-6 small text-uppercase fw-bolder">
                        Your payment methods
                    </h4>
                    <!-- === Body === -->
                    <ul class="list-group">
                        <t t-foreach="tokens_sudo" t-as="token_sudo">
                            <li name="o_payment_option" t-att-class="'list-group-item d-flex flex-column gap-2 py-3'                                              + (' o_outline' if allow_token_selection else '')">
                                <t t-call="payment.token_form">
                                    <t t-set="is_selected" t-value="token_sudo.id == selected_token_id"/>
                                </t>
                            </li>
                        </t>
                    </ul>
                </div>
                <!-- === Payment methods === -->
                <div t-if="payment_methods_sudo" id="o_payment_methods" t-att-class="'collapse' if collapse_payment_methods else ''">
                    <!-- === Header === -->
                    <h4 class="fs-6 small text-uppercase fw-bolder">
                        <t t-if="not collapse_payment_methods">Choose a payment method</t>
                        <t t-else="">Other payment methods</t>
                        <t t-call="payment.availability_report_button"/>
                    </h4>
                    <!-- === Body === -->
                    <ul class="list-group">
                        <t t-foreach="payment_methods_sudo" t-as="pm_sudo">
                            <li name="o_payment_option" class="list-group-item d-flex flex-column gap-2 py-3 o_outline">
                                <t t-call="payment.method_form">
                                    <t t-set="is_selected" t-value="pm_sudo.id == selected_method_id"/>
                                </t>
                            </li>
                        </t>
                    </ul>
                </div>
            </div>
            <div class="d-flex justify-content-end flex-column flex-md-row gap-2 my-2">
                <!-- === Expand payment methods button === -->
                <button t-if="collapse_payment_methods" name="o_payment_expand_button" type="button" href="#o_payment_methods" class="btn btn-link" data-bs-toggle="collapse">
                    Choose another method <i class="oi oi-arrow-down"/>
                </button>
                <!-- === Submit button === -->
                <t t-if="display_submit_button" t-call="payment.submit_button"/>
            </div>
            <!-- === Availability report === -->
            <t t-call="payment.availability_report"/>
        </form>
        <t t-else="" t-call="payment.no_pms_available_warning"/>
    </t>

    