<odoo>
    <template id="portal_my_invoices_payment" name="Payment on My Invoices" inherit_id="account.portal_my_invoices">
        <xpath expr="//t[@t-call='portal.portal_table']/thead/tr/th[last()]" position="before">
            <th class="text-center">Status</th>
        </xpath>
        <xpath expr="//t[@t-foreach='invoices']/tr/td[last()]" position="before">
            <td class="text-center">
                <t t-set="tx_ids" t-value="invoice.transaction_ids.filtered(lambda tx: tx.state in ('pending', 'authorized', 'done'))"/>
                <t t-set="pending_manual_txs" t-value="tx_ids.filtered(lambda tx: tx.state == 'pending' and tx.acquirer_id.provider in ('transfer', 'manual'))"/>
                <a t-if="invoice.state == 'open' and invoice.amount_total and invoice.type == 'out_invoice' and (pending_manual_txs or not tx_ids)"
                    t-att-href="invoice.get_portal_url(anchor='portal_pay')" title="Pay now" aria-label="Pay now" class="btn btn-sm btn-primary" role="button">
                    <i class="fa fa-arrow-circle-right"/><span class='d-none d-md-inline'> Pay Now</span>
                </a>
            </td>
        </xpath>
        <xpath expr="//t[@t-foreach='invoices']/tr/td[hasclass('tx_status')]" position="replace">
            <t t-set="last_tx" t-value="invoice.get_portal_last_transaction()"/>
            <td class="tx_status text-center">
                <t t-if="invoice.state == 'open' and (last_tx.state not in ['pending', 'authorized', 'done', 'cancel'] or (last_tx.state == 'pending' and last_tx.acquirer_id.provider in ('transfer', 'manual')))">
                    <span class="badge badge-pill badge-info"><i class="fa fa-fw fa-clock-o"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
                </t>
                <t t-if="invoice.state == 'open' and last_tx.state == 'authorized'">
                    <span class="badge badge-pill badge-primary"><i class="fa fa-fw fa-check"/><span class="d-none d-md-inline"> Authorized</span></span>
                </t>
                <t t-if="invoice.state == 'open' and last_tx.state == 'pending' and last_tx.acquirer_id.provider not in ('transfer', 'manual')">
                  <span class="badge badge-pill badge-warning"><span class="d-none d-md-inline"> Pending</span></span>
                </t>
                <t t-if="invoice.state == 'paid' or last_tx.state == 'done'">
                    <span class="badge badge-pill badge-success"><i class="fa fa-fw fa-check"></i><span class="d-none d-md-inline"> Paid</span></span>
                </t>
                <t t-if="invoice.state == 'cancel'">
                    <span class="badge badge-pill badge-danger"><i class="fa fa-fw fa-remove"></i><span class="d-none d-md-inline"> Cancelled</span></span>
                </t>
            </td>
        </xpath>
    </template>

    <template id="portal_invoice_payment" name="Invoice Payment">
        <div class="row" t-if="not tx_ids and invoice.state == 'open' and invoice.amount_total" id="portal_pay">
            <div class="modal fade" id="pay_with" role="dialog">
                <div class="modal-dialog modal-content">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title">Pay with</h3>
                            <button type="button" class="close" data-dismiss="modal">&amp;times;</button>
                        </div>
                        <div class="modal-body">
                            <div t-if="pms or acquirers" id="payment_method" class="text-left col-md-13">
                                <t t-call="payment.payment_tokens_list">
                                    <t t-set="mode" t-value="'payment'"/>
                                    <t t-set="partner_id" t-value="invoice.partner_id.id"/>
                                    <t t-set="success_url" t-value="invoice.get_portal_url()"/>
                                    <t t-set="error_url" t-value="invoice.get_portal_url()"/>
                                    <t t-set="access_token" t-value="access_token or ''"/>
                                    <t t-set="callback_method" t-value="''"/>
                                    <t t-set="form_action" t-value="'/invoice/pay/' + str(invoice.id) + '/s2s_token_tx/'"/>
                                    <t t-set="prepare_tx_url" t-value="'/invoice/pay/' + str(invoice.id) + '/form_tx/'"/>
                                    <t t-set="submit_txt">Pay Now</t>
                                    <t t-set="icon_class" t-value="'fa-lock'"/>
                                </t>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <template id="portal_invoice_page_inherit_payment" name="Payment on My Invoices" inherit_id="account.portal_invoice_page">
        <xpath expr="//t[@t-call='portal.portal_record_sidebar']//div[hasclass('o_download_pdf')]" position="before">
            <t t-set="tx_ids" t-value="invoice.transaction_ids.filtered(lambda tx: tx.state in ('pending', 'authorized', 'done'))"/>
            <t t-set="pending_manual_txs" t-value="tx_ids.filtered(lambda tx: tx.state == 'pending' and tx.acquirer_id.provider in ('transfer', 'manual'))"/>
            <div>
                <a href="#" t-if="invoice.state == 'open' and invoice.amount_total and invoice.type == 'out_invoice' and (pending_manual_txs or not tx_ids)"
                    class="btn btn-primary btn-block mb-2" data-toggle="modal" data-target="#pay_with">
                    <i class="fa fa-fw fa-arrow-circle-right"/> Pay Now
                </a>
                <div t-if="tx_ids and not pending_manual_txs and invoice.state != 'paid'" class="alert alert-info py-1 mb-2" >
                    <i class="fa fa-fw fa-check-circle"/> Pending
                </div>
                <div t-if="invoice.state == 'paid'" class="alert alert-success py-1 mb-2" >
                    <i class="fa fa-fw fa-check-circle"/> Paid
                </div>
            </div>
        </xpath>
        <xpath expr="//div[@id='invoice_content']//div[hasclass('o_portal_html_view')]" position="before">
            <div t-if="invoice.transaction_ids and invoice.amount_total and not success and not error" class="o_account_payment_tx_status" t-att-data-invoice-id="invoice.id">
                <t t-call="payment.payment_confirmation_status">
                    <t t-set="payment_tx_id" t-value="invoice.get_portal_last_transaction()"/>
                    <t t-set="reference" t-value="invoice.reference"/>
                </t>
            </div>
            <t t-set="tx_ids" t-value="invoice.transaction_ids.filtered(lambda tx: tx.state in ('authorized', 'done'))"/>
            <div t-if="not tx_ids and invoice.state == 'open' and invoice.amount_total" id="portal_pay">
                <div t-if="pms or acquirers" id="payment_method">
                    <t t-call="account_payment.portal_invoice_payment"/>
                </div>
            </div>
            <div class="panel-body" t-if="existing_token">
                <div class="offset-lg-3 col-lg-6">
                    <i class="fa fa-info"></i> You have credits card registered, you can log-in to be able to use them.
                </div>
            </div>
        </xpath>
    </template>

    <template id="portal_invoice_error" name="Invoice error display: payment errors"
            inherit_id="account.portal_invoice_error">
        <xpath expr="//t[@name='generic']" position="after">
            <t t-if="error == 'pay_invoice_invalid_doc'">
                There was an error processing your payment: invalid invoice.
            </t>
            <t t-if="error == 'pay_invoice_invalid_token'">
                There was en error processing your payment: invalid credit card ID.
            </t>
            <t t-if="error == 'pay_invoice_tx_fail'">
                There was an error processing your payment: transaction failed.<br />
                <t t-set="tx_id" t-value="invoice.get_portal_last_transaction()"/>
                <t t-if="tx_id and tx_id.state_message">
                    <t t-esc="tx_id.state_message"/>
                </t>
            </t>
            <t t-if="error == 'pay_invoice_tx_token'">
                There was an error processing your payment: issue with credit card ID validation.
            </t>
        </xpath>
    </template>

    <template id="portal_invoice_success" name="Invoice success display: payment success"
            inherit_id="account.portal_invoice_success">
        <xpath expr="//a[hasclass('close')]" position="after">
            <t t-if="success == 'pay_invoice'">
                <t t-set="payment_tx_id" t-value="invoice.get_portal_last_transaction()"/>
                <span t-if='payment_tx_id.acquirer_id.done_msg' t-raw="payment_tx_id.acquirer_id.done_msg"/>
                <span t-if='payment_tx_id.acquirer_id.post_msg' t-raw="payment_tx_id.acquirer_id.post_msg"/>
                <div t-if="payment_tx_id.acquirer_id.post_msg and payment_tx_id.acquirer_id.provider == 'transfer' and invoice.reference">
                    <b>Communication: </b><span t-esc='invoice.reference'/>
                </div>
            </t>
            <t t-if="success == 'pay_invoice' and invoice.state == 'paid'">
                Done, your online payment has been successfully processed. Thank you for your order.
            </t>
        </xpath>
    </template>
</odoo>
