<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

    <t t-name="PaymentScreenPaymentLines" owl="1">
            <div class="paymentlines">
                <p class="title-category">Summary</p>
                <t t-foreach="props.paymentLines" t-as="line" t-key="line.cid">
                    <t t-if="line.selected">
                        <div class="paymentline selected"
                             t-att-class="selectedLineClass(line)"
                             t-on-click="() => this.trigger('select-payment-line', { cid: line.cid })">
                             <div class="payment-name">
                                 <t t-esc="line.payment_method.name" />
                             </div>
                            <div class="payment-amount">
                                <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                        <t t-esc="env.pos.format_currency_no_symbol(line.get_amount())" />
                                </t>
                                <t t-else="">
                                        <t t-esc="formatLineAmount(line)" />
                                </t>
                            </div>
                            <t t-if="!line.payment_status or !['done', 'reversed', 'waitingCard', 'waitingCapture'].includes(line.payment_status)">
                                <div class="delete-button"
                                    t-on-click="() => this.trigger('delete-payment-line', { cid: line.cid })"
                                    aria-label="Delete" title="Delete">
                                    <i class="fa fa-times-circle" />
                                </div>
                            </t>
                        </div>
                        <t t-if="line and line.payment_status">
                            <div class="paymentline electronic_payment">
                                <t t-if="line.payment_status == 'pending'">
                                    <div class="electronic_status">
                                        Payment request pending
                                    </div>
                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.trigger('send-payment-request', line)">
                                        Send
                                    </div>
                                </t>
                                <t t-elif="line.payment_status == 'retry'">
                                    <div class="electronic_status">
                                        Transaction cancelled
                                    </div>
                                    <div class="button send_payment_request highlight" title="Send Payment Request" t-on-click="() => this.trigger('send-payment-request', line)">
                                        Retry
                                    </div>
                                </t>
                                <t t-elif="line.payment_status == 'force_done'">
                                    <div class="electronic_status">
                                        Connection error
                                    </div>
                                    <div class="button send_force_done" title="Force Done" t-on-click="() => this.trigger('send-force-done', line)">
                                        Force done
                                    </div>
                                </t>
                                <t t-elif="line.payment_status == 'waitingCard'">
                                    <div class="electronic_status">
                                        Waiting for card
                                    </div>
                                    <div class="button send_payment_cancel" title="Cancel Payment Request" t-on-click="() => this.trigger('send-payment-cancel', line)">
                                        Cancel
                                    </div>
                                </t>
                                <t t-elif="['waiting', 'waitingCancel', 'waitingCapture'].includes(line.payment_status)">
                                    <div class="electronic_status">
                                        Request sent
                                    </div>
                                    <div>
                                        <i class="fa fa-circle-o-notch fa-spin" role="img" />
                                    </div>
                                </t>
                                <t t-elif="line.payment_status == 'reversing'">
                                    <div class="electronic_status">
                                        Reversal request sent to terminal
                                    </div>
                                    <div>
                                        <i class="fa fa-circle-o-notch fa-spin" role="img" />
                                    </div>
                                </t>
                                <t t-elif="line.payment_status == 'done'">
                                    <div class="electronic_status">
                                        Payment Successful
                                    </div>
                                    <t t-if="line.can_be_reversed">
                                        <div class="button send_payment_reversal" title="Reverse Payment" t-on-click="() => this.trigger('send-payment-reverse', line)">
                                            Reverse
                                        </div>
                                    </t>
                                    <t t-else="">
                                        <div></div>
                                    </t>
                                </t>
                                <t t-elif="line.payment_status == 'reversed'">
                                    <div class="electronic_status">
                                        Payment reversed
                                    </div>
                                    <div></div>
                                </t>
                            </div>
                        </t>
                    </t>
                    <t t-else="">
                        <div class="paymentline"
                             t-att-class="unselectedLineClass(line)"
                             t-on-click="() => this.trigger('select-payment-line', { cid: line.cid })">
                             <div class="payment-name">
                                 <t t-esc="line.payment_method.name" />
                             </div>
                            <div class="payment-amount">
                                <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                        <t t-esc="env.pos.format_currency_no_symbol(line.get_amount())" />
                                </t>
                                <t t-else="">
                                        <t t-esc="formatLineAmount(line)" />
                                </t>
                            </div>
                            <t t-if="!line.payment_status or !['done', 'reversed'].includes(line.payment_status)">
                                <div class="delete-button"
                                    t-on-click="() => this.trigger('delete-payment-line', { cid: line.cid })"
                                    aria-label="Delete" title="Delete">
                                    <i class="fa fa-times-circle" />
                                </div>
                            </t>
                        </div>
                    </t>
                </t>
            </div>
    </t>

</templates>
