{% extends "baseLayout.html" %}

{% load i18n %}
{% load l10n %}

{% block title %}
{% translate "Drinks - Order" %}
{% endblock %}

{% block headAdditional %}
    <link rel="stylesheet" href="/static/css/order.css">
    <link rel="stylesheet" href="/static/css/customNumberInput.css">
{% endblock %}

{% block heading %}
    {% translate "Order" %}
{% endblock %}
    
{% block content %}

    {% if drink and drink.available > 0 and not drink.deleted %}
    
        {% if user.balance > 0 or user.allow_order_with_negative_balance %}

            <form id="orderForm">
                {% csrf_token %}

                <div class="row">
                    <div class="column">{% translate "Drink" %}:</div>
                    <div class="column">{{ drink.product_name }}</div>
                </div>

                <div class="row">
                    <div class="column">{% translate "Price per Item" %} ({{ currency_suffix }}):</div>
                    <div class="column" id="pricePerDrink" data-drink-price="{% localize off %}{{ drink.price }}{% endlocalize %}">{{ drink.price }}</div>
                </div>

                {% if not drink.binary_availability %}
                <div class="row">
                    <div class="column">{% translate "Available" %}:</div>
                    <div class="column">{{ drink.available }}</div>
                </div>
                {% endif %}

                <div class="row">
                    <div class="column">{% translate "Count" %}:</div>
                    <div class="column">
                        <span class="customNumberInput">
                            <button type="button" class="customNumberInput-minus" id="numberOfDrinksBtnA">-</button>
                            {% if drink.binary_availability %}
                            <input type="number" class="customNumberInputField" name="numberOfDrinks" id="numberOfDrinks"
                                min="1" max="100" value="1">
                            {% else %}
                            <input type="number" class="customNumberInputField" name="numberOfDrinks" id="numberOfDrinks"
                                max="{{ drink.available }}" min="1" max="100" value="1">
                            {% endif %}
                            <button type="button" class="customNumberInput-plus" id="numberOfDrinksBtnB">+</button>
                        </span>
                    </div>
                </div>

                <div class="row">
                    <div class="column">{% translate "Sum" %} ({{ currency_suffix }}):</div>
                    <div class="column" id="orderCalculatedSum">{{ drink.price }}</div>
                </div>
                    
                <div id="statusInfo"></div>

                <input type="hidden" name="drinkID" id="drinkID" value="{{ drink.id }}">

                <div class="horizontalButtonList">
                    <a href="/" class="button">{% translate "cancel" %}</a>
                    <input type="submit" id="orderSubmitBtn" class="button" value='{% translate "order" %}'>
                </div>

            </form>


            <script src="/static/js/order.js"></script>
            <script src="/static/js/customNumberInput.js"></script>

        {% else %}

            <div class="centeringFlex">
                <p>{% translate "You can't order this, because you have a negative balance." %}</p>
                <a href="/">{% translate "back" %}</a>
            </div>

        {% endif %}            

    {% else %}

    <div class="centeringFlex">
        <p>{% translate "This drink is not available." %}</p>
        <a href="/">{% translate "back" %}</a>
    </div>

    {% endif %}

{% endblock %}