<?xml version="1.0" encoding="UTF-8"?>

<templates xml:space="preserve">

    <t t-name="account.AccountPaymentField">
        <div>
            <t t-set="info" t-value="this.getInfo()"/>
            <div class="d-flex flex-column align-items-end">
                <table class="w-auto">
                    <t t-if="info.outstanding">
                        <tr>
                            <td colspan="2" class="text-start">
                                <strong id="outstanding" t-out="info.title"/>
                            </td>
                        </tr>
                    </t>
                    <t t-foreach="info.lines" t-as="line" t-key="line_index">
                        <tr>
                        <t t-if="info.outstanding">
                            <td t-out="line.formattedDate"/>
                            <td style="max-width: 9rem;">
                                <a t-att-title="line.bank_label ? (line.ref ? line.bank_label + ' - ' + line.ref : line.bank_label) : (line.ref or '')"
                                   role="button"
                                   class="open_account_move oe_form_field btn btn-link w-100 text-start"
                                   t-on-click="() => this.openMove(line.move_id)"
                                   data-bs-toggle="tooltip"
                                   t-att-payment-id="account_payment_id"
                                   t-out="line.move_name"/>
                            </td>
                            <td class="ps-2">
                                <a title="assign to invoice"
                                   role="button"
                                   class="oe_form_field btn btn-secondary outstanding_credit_assign d-print-none"
                                   t-att-data-id="line.id"
                                   href="#"
                                   data-bs-toggle="tooltip"
                                   t-on-click.prevent="() => this.assignOutstandingCredit(info.moveId, line.id)">Add</a>
                            </td>
                        </t>
                        <t t-if="!info.outstanding">
                            <td>
                               <a role="button" tabindex="0" class="js_payment_info fa fa-info-circle" t-att-index="line_index" style="margin-right:5px;" aria-label="Info" title="Journal Entry Info" data-bs-toggle="tooltip" t-on-click.stop="(ev) => this.onInfoClick(ev, line)"></a>
                            </td>
                            <td>
                                <i class="o_field_widget text-start o_payment_label">
                                    <t t-if="line.is_refund">Reversed on </t>
                                    <t t-else="">Paid on </t>
                                    <t t-out="line.formattedDate"></t>
                                </i>
                            </td>
                        </t>
                        <td t-if="!line.is_exchange" class="text-end ps-2 text-nowrap">
                            <span class="oe_form_field oe_form_field_float oe_form_field_monetary" dir="ltr">
                                <t t-out="line.amount_formatted"/>
                            </span>
                        </td>
                        </tr>
                    </t>
                    <tr t-if="info.exchangeInfo?.line_ids and info.exchangeInfo.line_ids.length">
                        <td>
                            <a role="button" tabindex="0" class="js_exchange_info fa fa-info-circle" style="margin-right:5px;" t-on-click.stop="() => this.onExchangeInfoClick(info.exchangeInfo.line_ids)"></a>
                        </td>
                        <td colspan="2">
                            <i class="o_field_widget text-start text-muted text-start">
                                <span class="oe_form_field oe_form_field_float oe_form_field_monetary fw-bold exchange_amount" dir="ltr">
                                    <t t-out="info.exchangeInfo.exchange_amount_formatted"/>
                                </span>
                                <span class="ps-2 exchange_label" t-out="info.exchangeInfo.label" />
                            </i>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </t>

    <t t-name="account.AccountPaymentPopOver">
        <div class="account_payment_popover">
            <h3 t-if="props.title" class="popover-header"><t t-out="props.title"/></h3>
            <div class="px-2">
                <div>
                    <table>
                        <tr>
                            <td class="fw-bolder">Amount:</td>
                            <td class="ps-1">
                                <t t-out="props.amount_company_currency"></t>
                                <t t-if="props.amount_foreign_currency">
                                    (<span class="fa fa-money"/> <t t-out="props.amount_foreign_currency"/>)
                                </t>
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-bolder align-top">Memo:</td>
                            <td class="ps-1">
                                <div class="o_memo_content" t-att-data-tooltip="props.ref" data-tooltip-position="left">
                                    <t t-out="props.ref"/>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="fw-bolder">Date:</td>
                            <td class="ps-1"><t t-out="props.date"/></td>
                        </tr>
                        <tr>
                            <td class="fw-bolder">Journal:</td>
                            <td class="ps-1">
                                <t t-out="props.journal_name"/>
                                <span t-if="props.payment_method_name">
                                    (<t t-out="props.payment_method_name"/>)
                                </span>
                            </td>
                        </tr>
                        <tr t-if="props.company_name">
                            <td class="fw-bolder">Branch:</td>
                            <td class="ps-1"><t t-out="props.company_name"/></td>
                        </tr>
                    </table>
                </div>
                <button class="btn btn-sm btn-primary js_unreconcile_payment float-start" style="margin-top:5px; margin-bottom:5px;" t-on-click="() => props._onRemoveMoveReconcile(props.move_id, props.partial_id)">Unreconcile</button>
                <button class="btn btn-sm btn-secondary js_open_payment float-end" style="margin-top:5px; margin-bottom:5px;" t-on-click="() => props._onOpenMove(props.move_id)">View</button>
            </div>
        </div>
    </t>

</templates>
