<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <template
        id="portal_my_home_menu_payment"
        name="Portal layout : payment menu entries"
        inherit_id="portal.portal_breadcrumbs"
        priority="35"
    >
        <xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
            <li t-if="page_name == 'payment'" t-attf-class="breadcrumb-item #{'active ' if not payment else ''}">
                Payments
            </li>
        </xpath>
    </template>

    <template
        id="portal_my_home_payment"
        name="Show Payments"
        inherit_id="portal.portal_my_home"
        customize_show="True"
        priority="35"
    >
        <xpath expr="//div[hasclass('o_portal_docs')]" position="inside">
            <t t-call="portal.portal_docs_entry">
                <t t-set="title">Payments</t>
                <t t-set="url" t-value="'/my/payments'"/>
                <t t-set="placeholder_count" t-value="'payment_count'"/>
            </t>
        </xpath>
    </template>
    <template id="portal_my_payments" name="Portal My 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">Payments</t>
                </t>
        <t t-if="not payments">
            <p>There are currently no payments for your account.</p>
        </t>
        <t t-if="payments" t-call="portal.portal_table">
            <thead>
                <tr class="active">
                    <th>Payment #</th>
                    <th>Payment Date</th>
                    <th class="text-center">Status</th>
                    <th class="text-end">Amount</th>
                </tr>
            </thead>
            <tbody>
                <t t-foreach="payments" t-as="payment">
                    <tr>
                        <td>
                            <t t-esc="payment.name"/>
                        </td>
                        <td><span t-field="payment.date"/></td>
                        <td class="tx_status text-center">
                            <t t-if="payment.state == 'posted'">
                                <span class="badge rounded-pill text-bg-success"><i
                                            class="fa fa-fw fa-check"
                                            aria-label="Posted"
                                            title="Posted"
                                            role="img"
                                        /><span class="d-none d-md-inline"> Posted</span></span>
                            </t>
                            <t t-if="payment.state == 'draft'">
                                <span class="badge rounded-pill text-bg-info"><i
                                            class="fa fa-fw fa-check"
                                            aria-label="Draft"
                                            title="Draft"
                                            role="img"
                                        /><span class="d-none d-md-inline"> Draft</span></span>
                            </t>
                            <t t-if="payment.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-out="payment.amount_signed"
                                    t-options='{"widget": "monetary", "display_currency": payment.currency_id}'
                                />
                        </td>
                    </tr>
                </t>
            </tbody>
        </t>
      </t>
    </template>
</odoo>
