<?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 class="alert alert-warning">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 name="invoice_number">Invoice #</th>
                    <th name="invoice_date">Invoice Date</th>
                    <th name="due_date" class="d-none d-md-table-cell">Due Date</th>
                    <th name="amount_due" class="text-end pe-3">Amount Due</th>
                    <th name="status">Status</th>
                </tr>
            </thead>
            <tbody>
                <t t-foreach="invoices" t-as="invoice_data">
                    <t t-set="invoice" t-value="invoice_data['invoice']"/>
                    <tr>
                        <td>
                            <a t-att-href="invoice.get_portal_url()" t-att-title="invoice.name">
                                <t t-out="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" t-att-class="'text-danger' if invoice.invoice_date_due and invoice.invoice_date_due &lt; datetime.date.today() and invoice.payment_state in ['not_paid', 'partial'] else ''">
                            <span t-field="invoice.invoice_date_due"/>
                        </td>
                        <td name="invoice_amount" class="text-end pe-3"><span t-out="-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>
                        <td name="invoice_status">
                            <t t-if="invoice.state == 'posted'" name="invoice_status_posted">
                                <span t-if="invoice.currency_id.is_zero(invoice.amount_residual)" 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>
                                <span t-elif="invoice.payment_state == 'in_payment' and not invoice.currency_id.is_zero(invoice.amount_residual)" class="badge rounded-pill text-bg-info">
                                    <i class="fa fa-fw fa-check" aria-label="processing_payment" title="Processing Payment" role="img"/>
                                    <span class="d-none d-md-inline"> Processing Payment</span>
                                </span>
                                <span t-elif="invoice.payment_state == 'reversed'" 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>
                                <span t-else="" class="badge rounded-pill text-bg-info" name="invoice_status_waiting_for_payment">
                                    <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-elif="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>
                    </tr>
                </t>
            </tbody>
        </t>
      </t>
    </t>

    