drinks-manager/app/templates/order.html

{% extends "baselayout.html" %}

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

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

{% block headAdditional %}
    <link rel="stylesheet" href="/static/css/appform.css">
    <link rel="stylesheet" href="/static/css/custom_number_input.css">
{% 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" class="appform">
                {% 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="forminput">
                    <span>{% translate "Count" %}:</span>
                    <span class="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="formbuttons">
                    <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="centeringflex">
                <p>{% translate "Your balance is too low to order a drink." %}</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 %}

    <script src="/static/js/autoreload.js"></script>

{% endblock %}