<?xml version="1.0"?>
<t name="Invoice Payment" t-name="account_payment.portal_invoice_payment">
        <div class="row">
            <div class="modal fade" id="pay_with" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header pb-0">
                            <h3 class="modal-title">Pay</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
                        </div>
                        <div class="modal-body">
                            <div t-if="company_mismatch">
                                <t t-call="payment.company_mismatch_warning"/>
                            </div>
                            <div t-elif="installment_state in ('next', 'overdue') and amount_due != next_amount_to_pay" id="o_payment_installments_modal">
                                <div class="btn-group w-100" id="o_payment_tabs" role="tablist">
                                    <button class="btn btn-outline-primary o_btn_payment_tab active" id="o_payment_installments_tab" data-bs-toggle="pill" data-bs-target="#o_payment_installments" type="button" role="tab" aria-controls="o_payment_installments" aria-selected="true">
                                        <strong>Installment</strong>
                                        <br/>
                                        <t t-out="next_amount_to_pay" t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                                    </button>
                                    <button class="btn btn-outline-primary o_btn_payment_tab" id="o_payment_full_tab" data-bs-toggle="pill" data-bs-target="#o_payment_full" type="button" role="tab" aria-controls="o_payment_full" aria-selected="false">
                                        <strong>Full Amount</strong><br/>
                                        <t t-out="amount_due" t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                                    </button>
                                </div>
                                <div class="tab-content" id="o_payment_tabcontent">
                                    <div t-if="payment_state == 'in_payment'" class="alert alert-danger mt-2">
                                        A payment has already been made on this invoice, please make sure to not pay twice.
                                    </div>
                                    <div class="tab-pane my-3 show active" id="o_payment_installments" role="tabpanel" aria-labelledby="o_payment_installments_tab" tabindex="0">
                                        <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_installment'"/>
                                                <t t-set="label">Amount</t>
                                                <t t-set="value" t-value="next_amount_to_pay"/>
                                                <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_installment'"/>
                                                <t t-set="label">Reference</t>
                                                <t t-set="value" t-value="next_payment_reference"/>
                                                <t t-set="include_separator" t-value="True"/>
                                            </t>
                                        </div>
                                    </div>
                                    <div class="tab-pane my-3" id="o_payment_full" role="tabpanel" aria-labelledby="o_payment_full_tab" tabindex="0">
                                        <div t-if="show_epd" class="alert alert-success">
                                            Early Payment Discount of <span t-out="epd_discount_amount_currency" t-options="{'widget': 'monetary', 'display_currency': currency}"/> has been applied.
                                        </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_full'"/>
                                                <t t-set="label">Amount</t>
                                                <t t-set="value" t-value="amount_due"/>
                                                <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_full'"/>
                                                <t t-set="label">Reference</t>
                                                <t t-set="value" t-value="invoice_name"/>
                                                <t t-set="include_separator" t-value="True"/>
                                            </t>
                                        </div>
                                    </div>
                                    <!-- set default amount as the max. amount due, the 'amount'
                                         will be updated/set js-side depending the active tab -->
                                    <t t-call="account_payment.form">
                                        <t t-set="amount" t-value="amount_due"/>
                                    </t>
                                </div>
                            </div>
                            <t t-else="">
                                <div t-if="show_epd" class="alert alert-success">
                                    Early Payment Discount of <span t-out="epd_discount_amount_currency" t-options="{'widget': 'monetary', 'display_currency': currency}"/> has been applied.
                                </div>
                                <div t-if="payment_state == 'in_payment'" class="alert alert-danger">
                                    A payment has already been made on this invoice, please make sure to not pay twice.
                                </div>
                                <div class="text-bg-light row row-cols-1 row-cols-md-2 mx-0 mb-3 py-2 rounded">
                                    <t t-call="payment.summary_item">
                                        <t t-set="name" t-value="'amount_full'"/>
                                        <t t-set="label">Amount</t>
                                        <t t-set="value" t-value="amount_due"/>
                                        <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_full'"/>
                                        <t t-set="label">Reference</t>
                                        <t t-set="value" t-value="next_payment_reference"/>
                                        <t t-set="include_separator" t-value="True"/>
                                    </t>
                                </div>
                                <t t-call="account_payment.form">
                                    <t t-set="amount" t-value="amount_due"/>
                                </t>
                            </t>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </t>

    