<?xml version="1.0"?>
<t name="My Invoices and Payments" t-name="account.portal_my_invoices">
      <t t-call="portal.portal_layout">
        <t t-set="breadcrumbs_searchbar" t-value="True"/>

        <t t-call="portal.portal_searchbar">
            <t t-set="title">Invoices</t>
        </t>
        <t t-if="not invoices">
            <p>There are currently no invoices and payments for your account.</p>
        </t>
        <t t-if="invoices" t-call="portal.portal_table">
            <thead>
                <tr class="active">
                    <th>Invoice #</th>
                    <th>Invoice Date</th>
                    <th class="d-none d-md-table-cell">Due Date</th>
                    <th class="text-center">Status</th>
                    <th class="text-end">Amount Due</th>
                </tr>
            </thead>
            <tbody>
                <t t-foreach="invoices" t-as="invoice">
                    <tr>
                        <td>
                            <a t-att-href="invoice.get_portal_url()" t-att-title="invoice.name">
                                <t t-esc="invoice.name" t-if="invoice.name != '/'"/>
                                <em t-else="">Draft Invoice</em>
                            </a>
                        </td>
                        <td><span t-field="invoice.invoice_date"/></td>
                        <td class="d-none d-md-table-cell"><span t-field="invoice.invoice_date_due"/></td>
                        <td class="tx_status text-center">
                            <t t-if="invoice.state == 'posted' and invoice.payment_state not in ('in_payment', 'paid', 'reversed')">
                                <span class="badge rounded-pill text-bg-info"><i class="fa fa-fw fa-clock-o" aria-label="Opened" title="Opened" role="img"/><span class="d-none d-md-inline"> Waiting for Payment</span></span>
                            </t>
                            <t t-if="invoice.state == 'posted' and invoice.payment_state in ('paid', 'in_payment')">
                                <span class="badge rounded-pill text-bg-success"><i class="fa fa-fw fa-check" aria-label="Paid" title="Paid" role="img"/><span class="d-none d-md-inline"> Paid</span></span>
                            </t>
                            <t t-if="invoice.state == 'posted' and invoice.payment_state == 'reversed'">
                                <span class="badge rounded-pill text-bg-success"><i class="fa fa-fw fa-check" aria-label="Reversed" title="Reversed" role="img"/><span class="d-none d-md-inline"> Reversed</span></span>
                            </t>
                            <t t-if="invoice.state == 'cancel'">
                                <span class="badge rounded-pill text-bg-warning"><i class="fa fa-fw fa-remove" aria-label="Cancelled" title="Cancelled" role="img"/><span class="d-none d-md-inline"> Cancelled</span></span>
                            </t>
                        </td>
                        <td class="text-end"><span t-esc="-invoice.amount_residual if invoice.move_type == 'out_refund' else invoice.amount_residual" t-options="{&quot;widget&quot;: &quot;monetary&quot;, &quot;display_currency&quot;: invoice.currency_id}"/></td>
                    </tr>
                </t>
            </tbody>
        </t>
      </t>
    </t>

    