{% extends "baselayout.html" %}

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

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

{% block content %}
<div class="flex flex-column flex-center">
{% if drink and drink.available > 0 and not drink.deleted %}
{% if user.balance > 0 or user.allow_order_with_negative_balance %}
    <form id="orderform" class="flex flex-column flex-center appform gap-1rem">
        {% csrf_token %}
        <h1 class="formheading">{% translate "Order" %}</h1>
        <div class="forminfo">
            <span>{% translate "Drink" %}:</span>
            <span>{{ drink.product_name }}</span>
        </div>
        <div class="forminfo">
            <span>{% translate "Price per Item" %} ({{ currency_suffix }}):</span> 
            <span id="priceperdrink" data-drink-price="{% localize off %}{{ drink.price }}{% endlocalize %}">
                {{ drink.price }}
            </span>
        </div>
        {% if not drink.do_not_count %}
        <div class="forminfo">
            <span>{% translate "Available" %}:</span>
            <span>{{ drink.available }}</span>
        </div>
        {% endif %}
        <div class="forminfo">
            <span>{% translate "Sum" %} ({{ currency_suffix }}):</span>
            <span id="ordercalculatedsum">{{ drink.price }}</span>
        </div>
        <div class="flex forminput">
            <span>{% translate "Count" %}:</span>
            <span class="flex flex-row customnumberinput">
                <button type="button" class="customnumberinput-minus" id="numberofdrinks-btn-minus">-</button>
                {% if drink.do_not_count %}
                <input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
                    min="1" max="100" value="1">
                {% else %}
                <input type="number" class="customnumberinput-field" name="numberofdrinks" id="numberofdrinks"
                    max="{{ drink.available }}" min="1" max="100" value="1">
                {% endif %}
                <button type="button" class="customnumberinput-plus" id="numberofdrinks-btn-plus">+</button>
            </span>
        </div>
        <div id="statusinfo"></div>
        <input type="hidden" name="drinkid" id="drinkid" value="{{ drink.id }}">
        <div class="buttons">
            <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/custom_number_input.js"></script>
{% else %}
    <div class="flex flex-center">
        <p>{% translate "Your balance is too low to order a drink." %}</p>
        <a href="/">{% translate "back" %}</a>
    </div>
{% endif %}            
{% else %}
    <div class="flex flex-center">
        <p>{% translate "This drink is not available." %}</p>
        <a href="/">{% translate "back" %}</a>
    </div>
{% endif %}
    <script src="/static/js/autoreload.js"></script>
</div>
{% endblock %}