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

    <t t-name="NumpadWidget" owl="1">
        <div class="numpad">
            <button class="input-button number-char" t-on-click="() => this.sendInput('1')">1</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('2')">2</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('3')">3</button>
            <button class="mode-button" t-att-class="{'selected-mode': props.activeMode === 'quantity'}"
                    t-on-click="() => this.changeMode('quantity')">Qty</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('4')">4</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('5')">5</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('6')">6</button>
            <button class="mode-button" t-att-class="{
                        'selected-mode': props.activeMode === 'discount',
                        'disabled-mode': !hasManualDiscount
                    }"
                    t-att-disabled="!hasManualDiscount"
                    t-on-click="() => this.changeMode('discount')">% Disc</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('7')">7</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('8')">8</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('9')">9</button>
            <button class="mode-button" t-att-class="{
                    'selected-mode': props.activeMode === 'price',
                    'disabled-mode': !hasPriceControlRights
                }" t-att-disabled="!hasPriceControlRights"
                    t-on-click="() => this.changeMode('price')">Price</button>
            <button class="input-button numpad-minus" t-att-class="{ 'disabled-mode': props.disableSign }" t-on-click="() => this.sendInput('-')">+/-</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput('0')">0</button>
            <button class="input-button number-char" t-on-click="() => this.sendInput(decimalSeparator)">
                <t t-esc="decimalSeparator" />
            </button>
            <button class="input-button numpad-backspace" t-on-click="() => this.sendInput('Backspace')">
                <img style="pointer-events: none;" src="/point_of_sale/static/src/img/backspace.png"
                     width="24" height="21" alt="Backspace" />
            </button>
        </div>
    </t>

</templates>
