<?xml version="1.0"?>
<data name="Invoice/Bill" 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,account.group_account_invoice,account.group_account_readonly">
                <t t-call="portal.portal_back_in_edit_mode">
                    <t t-set="backend_url" t-value="'/odoo/action-account.action_move_out_invoice_type/%s' % invoice.id"/>
                </t>
            </t>

            <div class="row o_portal_invoice_sidebar">
                <!-- Sidebar -->
                <t t-call="portal.portal_record_sidebar">
                    <t t-set="classes" t-value="'col-lg-4 col-xxl-3 d-print-none'"/>
                    <t t-set="title">
                        <h2 class="mb-0 text-break mx-auto">
                            <span t-field="invoice.amount_total"/>
                        </h2>
                        <div class="my-1 w-100" t-if="payment_state in ('not_paid', 'partial')">
                            <div class="alert alert-success px-2 py-1 text-center mb-2" t-if="payment_state == 'partial'">
                                Already Paid: <span t-out="amount_paid" t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                            </div>
                            <div t-if="payment_state == 'partial'" class="alert alert-warning px-2 py-1 text-center mb-2">
                                Left to Pay:
                                <span t-out="amount_due" t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                                <div t-if="installment_state and is_last_installment" class="w-100 mt-2">
                                    <i class="fa fa-clock-o"/>
                                    <span class="o_portal_sidebar_timeago" t-att-datetime="due_date"/>
                                </div>
                            </div>
                            <div t-if="installment_state == 'epd' and epd_discount_amount_currency" class="alert alert-warning px-2 py-1 text-center mb-2">
                                <t t-out="epd_discount_msg"/>
                            </div>
                        </div>
                        <t t-if="installment_state in ('next', 'overdue') and not is_last_installment and amount_due != 0.0 and payment_state != 'in_payment'">
                            <h5 name="installment_title" class="w-100 text-center mb-0">
                                <t t-if="installment_state == 'next'">Next Installment</t>
                                <t t-elif="installment_state == 'overdue'">Overdue</t>
                            </h5>
                            <h4 name="installment_amount" class="mb-0 text-break w-100 text-center" t-out="next_amount_to_pay" t-options="{'widget': 'monetary', 'display_currency': currency}"/>
                        </t>
                        <div class="small w-100 text-center" t-if="payment_state in ('not_paid', 'partial') and not (is_last_installment and installment_state)">
                            <i class="fa fa-clock-o"/>
                            <span class="o_portal_sidebar_timeago ml4" t-att-datetime="next_due_date"/>
                        </div>
                    </t>

                    <t t-set="entries">
                        <div class="d-flex flex-column gap-4 mt-3">
                            <div class="d-flex flex-column gap-2">
                                <div class="o_download_pdf d-flex flex-lg-column flex-xl-row flex-wrap gap-2">
                                    <a class="btn btn-light o_download_btn flex-grow-1" t-att-href="invoice.get_portal_url(report_type='pdf', download=True)" title="Download" role="button">
                                        <i class="fa fa-download"/> Download
                                    </a>
                                </div>
                            </div>
                            <div t-if="invoice.invoice_user_id" class="flex-grow-1">
                                <h6>
                                    <small class="text-muted">
                                        <t t-if="invoice.move_type == 'out_invoice'">
                                            Salesperson
                                        </t>
                                        <t t-if="invoice.move_type == 'in_invoice'">
                                            Purchase Representative
                                        </t>
                                    </small>
                                </h6>
                                <t t-call="portal.portal_my_contact">
                                    <t t-set="_contactAvatar" t-value="image_data_uri(invoice.invoice_user_id.avatar_128)"/>
                                    <t t-set="_contactName" t-value="invoice.invoice_user_id.name"/>
                                    <t t-set="_contactLink" t-value="True"/>
                                    <div t-field="invoice.invoice_user_id" t-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;city&quot;, &quot;phone&quot;]}"/>
                                </t>
                            </div>
                        </div>
                    </t>
                </t>

                <!-- Page Content -->
                <div id="invoice_content" class="o_portal_content col-12 col-lg-8 col-xxl-9">
                    <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 position-relative bg-white shadow overflow-hidden">
                        <div class="o_portal_html_loader text-center">
                            <i class="fa fa-circle-o-notch fa-spin fa-2x fa-fw text-black-50"/>
                        </div>
                        <iframe id="invoice_html" class="position-relative d-block" width="100%" height="100%" frameborder="0" scrolling="no" t-att-src="invoice.get_portal_url(report_type='html')"/>
                    </div>
                    <!-- chatter -->
                    <div id="invoice_communication" class="mt-4">
                        <h3>Communication history</h3>
                        <t t-call="portal.message_thread"/>
                    </div>
                </div>
            </div>
        </xpath>
    <xpath expr="." position="attributes"><attribute name="t-name">account.portal_invoice_page</attribute></xpath></data>

    