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

    <t t-name="point_of_sale.PaymentScreenPaymentLines">
            <div class="paymentlines d-flex flex-column">
                <h4 class="title-category pt-3 pb-2 px-3 m-0 bg-view border-bottom border-2">Summary</h4>
                <t t-foreach="props.paymentLines" t-as="line" t-key="line.cid">
                    <t t-if="line.selected">
                        <div class="paymentline selected d-flex align-items-center bg-200"
                            t-att-class="selectedLineClass(line)">
                            <div class="payment-infos d-flex align-items-center justify-content-between flex-grow-1 px-3 py-4 my-2 text-truncate cursor-pointer" t-on-click="() => this.selectLine(line)">
                                 <span class="payment-name"><t t-esc="line.payment_method.name"/></span>
                                 <div class="payment-amount px-3">
                                    <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                            <t t-esc="env.utils.formatCurrency(line.get_amount(), false)" />
                                    </t>
                                    <t t-else="">
                                            <t t-esc="formatLineAmount(line)" />
                                    </t>
                                </div>
                            </div>
                            
                            <t t-if="!line.payment_status or !['done', 'reversed', 'waitingCard', 'waitingCapture'].includes(line.payment_status)">
                                <button class="delete-button btn btn-link mx-2 px-3"
                                    t-on-click="() => this.props.deleteLine(line.cid)"
                                    aria-label="Delete" title="Delete">
                                    <i class="fa fa-2x fa-times-circle" />
                                </button>
                            </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 text-bg-primary" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(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 text-bg-primary" title="Send Payment Request" t-on-click="() => this.props.sendPaymentRequest(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.props.sendForceDone(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.props.sendPaymentCancel(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.props.sendPaymentReverse(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 d-flex align-items-center bg-view"
                            t-att-class="unselectedLineClass(line)">
                             <div class="payment-infos d-flex align-items-center justify-content-between flex-grow-1 px-3 py-4 my-2 text-truncate cursor-pointer" t-on-click="() => this.selectLine(line)">
                                 <t t-esc="line.payment_method.name" />
                                 <div class="payment-amount px-3">
                                    <t t-if="line and line.payment_status and ['done', 'waitingCard', 'waiting', 'reversing', 'reversed'].includes(line.payment_status)">
                                            <t t-esc="env.utils.formatCurrency(line.get_amount(), false)" />
                                    </t>
                                    <t t-else="">
                                            <t t-esc="formatLineAmount(line)" />
                                    </t>
                                </div>
                             </div>
                            <t t-if="!line.payment_status or !['done', 'reversed'].includes(line.payment_status)">
                                <div class="delete-button delete-button btn btn-link mx-2 px-3"
                                    t-on-click="() => this.props.deleteLine(line.cid)"
                                    aria-label="Delete" title="Delete">
                                    <i class="fa fa-2x fa-times-circle" />
                                </div>
                            </t>
                        </div>
                    </t>
                </t>
            </div>
    </t>

</templates>
