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

    <t t-name="point_of_sale.CashMovePopup" owl="1">
                <div class="popup cash-move-popup">
                    <main class="body">
                        <div class="cash-move">
                            <div class="input-amount">
                                <span t-on-click="() => this.onClickButton('in')" class="input-type" t-att-class="{ highlight: state.inputType == 'in' }">
                                    Cash In
                                </span>
                                <span t-on-click="() => this.onClickButton('out')" class="input-type" t-att-class="{ 'red-highlight': state.inputType == 'out' }">
                                    Cash Out
                                </span>
                                <div class="input-field" t-on-input="handleInputChange">
                                    <input type="text" name="amount" t-ref="input-amount-ref" t-on-keypress="_onAmountKeypress" t-model="state.inputAmount"/>
                                    <t t-if="env.pos.currency.symbol.length > 1">
                                        <span class="left-currency" t-esc="env.pos.currency.symbol" />
                                    </t>
                                    <t t-else="">
                                        <span class="currency" t-esc="env.pos.currency.symbol" />
                                    </t>
                                </div>
                            </div>
                            <textarea name="reason" t-model="state.inputReason" placeholder="Reason"></textarea>
                            <span t-if="state.inputHasError" class="error-message">
                                <t t-esc="errorMessage" />
                            </span>
                        </div>
                    </main>
                    <footer class="footer cash-move">
                        <div class="button confirm disable highlight dynamic-size" t-on-click="confirm">
                            Confirm <span t-esc="env.pos.format_currency(state.parsedAmount)"/>
                        </div>
                        <div class="button cancel" t-on-click="cancel">
                            <t t-esc="props.cancelText" />
                        </div>
                    </footer>
                </div>
    </t>

</templates>
