{% extends "base.html" %}

{% block header %}
    {# Show the username. #}
    <h1>Welcome, {{ authuser.name }}</h1>
    {{ super() }}
{% endblock %}

{% block main %}

    {# Show the users current balance #}
    Your balance: {{ authuser.balance|chf }}
    <br/>
    {# Logout link #}
    <div class="thumblist-item">
	<a href="/logout">Logout</a>
    </div>
    {# Links to deposit two common amounts of cash.  TODO: Will be replaced by a nicer UI later (#20) #}
    <div id="depositlist">
	<div class="thumblist-item">
            <a href="/deposit?n=100">Deposit CHF 1</a>
	</div>
	<div class="thumblist-item">
            <a href="/deposit?n=1000">Deposit CHF 10</a>
	</div>
    </div>
    <div id="deposit-wrapper">
        <div id="deposit-input">
            <div id="deposit-output">
            <span id="deposit-title"></span>
            <span id="deposit-amount">0.00</span>
            </div>
            {% for i in [('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5'), ('6', '6'), ('7', '7'), ('8', '8'), ('9', '9'), ('del', '✗'), ('0', '0'), ('ok', '✓')] %}
            <div class="numpad" id="numpad-{{ i.0 }}" onclick="deposit_key('{{ i.0 }}');">{{ i.1 }}</div>
            {% endfor %}
            <div id="transfer-userlist">
                <div id="scroll-up" onclick="scrollUserlist(-130);">▲</div>
                <ul id="transfer-userlist-list">
                    {% for user in (users if user != authuser) %}
                    <li onclick="set_transfer_user(this, {{ user.id }})">{{ user.name }}</li>
                    {% endfor %}
                </ul>
                <div id="scroll-down" onclick="scrollUserlist(+130);">▼</div>
            </div>
        </div>
    </div>
    <script src="/static/js/depositlist.js"></script>
    <br/>

    {% for product in products %}
        {# Show an item per product, consisting of the name, image, price and stock, triggering a purchase on click #}
        <div class="thumblist-item">
            {% if product.custom_price %}
	    <a onclick="setup_custom_price({{ product.id }}, '{{ product.name}}');">
	    {% else %}
            <a {% if product.ean %}id="a-buy-ean{{ product.ean }}"{% endif %} href="/buy?pid={{ product.id }}">
	    {% endif %}
                <span class="thumblist-title">{{ product.name }}</span>
		{% if product.custom_price %}
                <span class="thumblist-detail">Custom Price</span><br/>
		{% else %}
                <span class="thumblist-detail">Price:
                    {% if authuser.is_member %}
                        {{ product.price_member|chf }}
                    {% else %}
                        {{ product.price_non_member|chf }}
                    {% endif %}
                </span><br/>
		{% endif %}
                <div class="imgcontainer">
                    <img src="/static/upload/thumbnails/products/{{ product.id }}.png?cacheBuster={{ now }}" alt="Picture of {{ product.name }}" draggable="false"/>
                    {% set pstock = stock.get_stock(product) %}
                    {% if pstock is not none %}
                    <span class="thumblist-stock">{{ pstock }}</span>
                    {% endif %}
                </div>
            </a>
        </div>
    {% endfor %}
    <br/>

    {{ super() }}

{% endblock %}

{% block eanwebsocket %}
    let eaninput = document.getElementById("a-buy-ean" + e.data);
    if (eaninput === null) {
      document.location = "?ean=" + e.data;
    } else {
      eaninput.click();
    }
{% endblock %}