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

    <t t-name="point_of_sale.PaymentScreenStatus">
        <div t-if="props.order.payment_ids.length == 0" class="d-flex justify-content-center align-items-center text-center fs-4 flex-grow-1">
            Please select a payment method
        </div>
        <section t-elif="this.currentTip.amount > 0 or showStatus" t-attf-class="paymentlines-container border-top pt-3 {{ !isComplete ? 'text-danger' : 'text-success'}}">
            <div t-if="this.currentTip.amount > 0" class="tip-container d-flex flex-lg-row justify-content-between align-items-center fs-2 mb-2 text-dark position-relative">
                <span class="label pe-2" t-esc="tipLabel" />
                <span class="align-self-end me-5 pe-5">
                    <PriceFormatter price="tipText" />
                </span>
                <div class="position-absolute top-0 end-0 d-flex align-items-center h-100">
                    <i class="fa fa-info-circle mx-2 px-3 fs-4" data-tooltip="The tip is already included inside the payment lines" />
                </div>
            </div>
            <div t-if="showStatus" class="payment-status-container d-flex flex-column-reverse flex-lg-row justify-content-between fs-2">
                <div class="payment-status-amount d-flex justify-content-between flex-grow-1" t-attf-class=" {{ isIncompleteAndPositive ? 'text-danger' : 'text-success' }}">
                    <span class="label pe-2" t-out="statusText" />
                    <span class="amount align-self-end me-5 pe-5 highlight fw-bolder" t-att-amount="amountText">
                        <PriceFormatter price="amountText" />
                    </span>
                </div>
            </div>
        </section>
    </t>
</templates>
