<odoo>
    <template id="portal_my_home_menu_invoice" name="Portal layout : invoice menu entries" inherit_id="portal.portal_breadcrumbs" priority="30">
        <xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
            <li t-if="page_name == 'invoice'" t-attf-class="breadcrumb-item #{'active ' if not invoice else ''}">
                <a t-if="invoice" t-attf-href="/my/invoices?{{ keep_query() }}">Invoices</a>
                <t t-else="">Invoices</t>
            </li>
            <li t-if="invoice" class="breadcrumb-item active">
                <t t-esc="invoice.number" t-if="invoice.number"/>
                <t t-else=""><em>Draft Invoice</em></t>
            </li>
        </xpath>
    </template>

    <template id="portal_my_home_invoice" name="Portal My Home : invoice entries" inherit_id="portal.portal_my_home" priority="30">
        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
            <t t-if="invoice_count" t-call="portal.portal_docs_entry">
                <t t-set="title">Invoices</t>
                <t t-set="url" t-value="'/my/invoices'"/>
                <t t-set="count" t-value="invoice_count"/>
            </t>
        </xpath>
    </template>

    <template id="portal_my_invoices" name="My Invoices and Payments">
      <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/>
                    <th class="text-right">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.number">
                                <t t-esc="invoice.number" t-if="invoice.number"/>
                                <em t-else="">Draft Invoice</em>
                            </a>
                        </td>
                        <td><span t-field="invoice.date_invoice"/></td>
                        <td class='d-none d-md-table-cell'><span t-field="invoice.date_due"/></td>
                        <td class="tx_status">
                            <t t-if="invoice.state == 'open'">
                                <span class="badge badge-pill badge-info"><i class="fa fa-fw fa-clock-o" aria-label="Opened" title="Opened" role="img"></i><span class="d-none d-md-inline"> Waiting for Payment</span></span>
                            </t>
                            <t t-if="invoice.state == 'paid'">
                                <span class="badge badge-pill badge-success"><i class="fa fa-fw fa-check" aria-label="Paid" title="Paid" role="img"></i><span class="d-none d-md-inline"> Paid</span></span>
                            </t>
                            <t t-if="invoice.state == 'cancel'">
                                <span class="badge badge-pill badge-warning"><i class="fa fa-fw fa-remove" aria-label="Cancelled" title="Cancelled" role="img"></i><span class="d-none d-md-inline"> Cancelled</span></span>
                            </t>
                        </td>
                        <td class="text-right"><span t-esc="-invoice.residual if invoice.type == 'out_refund' else invoice.residual" t-options='{"widget": "monetary", "display_currency": invoice.currency_id}'/></td>
                    </tr>
                </t>
            </tbody>
        </t>
      </t>
    </template>

    <template id="portal_invoice_page" name="Invoice Portal Template" inherit_id="portal.portal_sidebar" primary="True">
        <xpath expr="//div[hasclass('o_portal_sidebar')]" position="inside">
            <t t-set="o_portal_fullwidth_alert" groups="sales_team.group_sale_salesman">
                <t t-call="portal.portal_back_in_edit_mode">
                    <t t-set="backend_url" t-value="'/web#return_label=Website&amp;model=%s&amp;id=%s&amp;action=%s&amp;view_type=form' % (invoice._name, invoice.id, invoice.env.ref('account.action_invoice_tree1').id)"/>
                </t>
            </t>

            <div class="row mt16 o_portal_invoice_sidebar">
                <!-- Sidebar -->
                <t t-call="portal.portal_record_sidebar">
                    <t t-set="classes" t-value="'col-12 col-lg flex-lg-grow-0 d-print-none'"/>
                    <t t-set="title">
                        <h2 class="mb-0">
                            <b t-if="invoice.residual > 0" t-field="invoice.residual"/>
                            <b t-else="1" t-field="invoice.amount_total"/>
                        </h2>
                        <div class="small" t-if="invoice.state != 'paid' and invoice.type == 'out_invoice'"><i class="fa fa-clock-o"/><span class="o_portal_sidebar_timeago ml4" t-att-datetime="invoice.date_due"/></div>
                    </t>

                    <t t-set="entries">
                        <ul class="list-group list-group-flush flex-wrap flex-row flex-lg-column">
                            <li class="list-group-item flex-grow-1">
                                <div class="o_download_pdf btn-toolbar flex-sm-nowrap">
                                    <div class="btn-group  flex-grow-1 mr-1 mb-1">
                                        <a class="btn btn-secondary btn-block o_download_btn" t-att-href="invoice.get_portal_url(report_type='pdf', download=True)" title="Download"><i class="fa fa-download"/> Download</a>
                                    </div>
                                    <div class="btn-group flex-grow-1 mb-1">
                                        <a class="btn btn-secondary btn-block o_print_btn o_portal_invoice_print" t-att-href="invoice.get_portal_url(report_type='pdf')" id="print_invoice_report" title="Print" target="_blank"><i class="fa fa-print"/> Print</a>
                                    </div>
                                </div>
                            </li>
                            <li t-if="invoice.user_id" class="list-group-item flex-grow-1">
                                <div class="small mb-1"><strong class="text-muted">Your Contact</strong></div>
                                <div class="row">
                                    <div class="col flex-grow-0 pr-2">
                                        <img t-if="invoice.user_id.image" class="rounded-circle mt-1 o_portal_contact_img" t-att-src="image_data_uri(invoice.user_id.image)" alt="Contact"/>
                                        <img t-else="" class="rounded-circle mt-1 o_portal_contact_img" src="/web/static/src/img/user_menu_avatar.png" alt="Contact"/>
                                    </div>
                                    <div class="col pl-0">
                                        <span t-field="invoice.user_id" t-options='{"widget": "contact", "fields": ["name", "phone"], "no_marker": True}'/>
                                        <a data-toggle="modal" href="#" data-target="#invoice_chatter" class="small"><i class="fa fa-fw fa-comments"/><b>Send message</b></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </t>
                </t>

                <!-- Page Content -->
                <div id="invoice_content" class="o_portal_page_content col-12 col-lg d-flex flex-column align-items-end">
                    <div class="o_portal_page_size">
                        <t t-if="error or warning" t-call="account.portal_invoice_error"/>
                        <t t-if="success and (not error and not warning)" t-call="account.portal_invoice_success"/>

                        <div class="o_portal_html_view shadow">
                            <div class="o_portal_html_loader text-center">
                                <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-black-50"></i>
                            </div>
                            <iframe id="invoice_html" class="mt8 mb8" width="100%" height="100%" frameborder="0" scrolling="no" t-att-src="invoice.get_portal_url(report_type='html')"/>
                        </div>
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <template id="portal_invoice_chatter" name="Allow Comments &amp; History" inherit_id="account.portal_invoice_page">
        <xpath expr="//div[@id='invoice_content']//div[hasclass('o_portal_html_view')]" position="after">
            <div class="modal fade" id="invoice_chatter" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="mt0 ml16 mb0">History</h3>
                            <button type="button" class="close" data-dismiss="modal">&amp;times;</button>
                        </div>
                        <div class="modal-body">
                            <t t-call="portal.message_thread">
                                <t t-set="token" t-value="invoice.access_token"/>
                                <t t-set="object" t-value="invoice"/>
                                <t t-set="pid" t-value="pid"/>
                                <t t-set="hash" t-value="hash"/>
                            </t>
                        </div>
                    </div>
                </div>
            </div>
        </xpath>
    </template>

    <template id="portal_invoice_error" name="Invoice error/warning display">
        <div class="row mr16">
            <div t-attf-class="'col-lg-12 mr16 ml16 alert alert-dismissable' #{'alert-danger' if error else 'alert-warning'}" role="alert">
                <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                <t t-if="error == 'generic'" name="generic">
                    There was an error processing this page.
                </t>
            </div>
        </div>
    </template>

    <template id="portal_invoice_success" name="Invoice success display">
        <div class="row mr16">
            <div class="col-lg-12 mr16 ml16 alert alert-dismissable alert-success" role="status">
                <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
            </div>
        </div>
    </template>
</odoo>
