{% extends "base.html" %}

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

{% block overlay %}
{% if lastaction is not none %}
{% if lastaction == 'buy' %}
<aside id="overlay">
    <h2>{{ lastproduct.name }}</h2>
    <img src="/static/upload/thumbnails/products/{{ lastproduct.id }}.png?cacheBuster={{ now }}" alt="Picture of {{ lastproduct.name }}" draggable="false"/>
{% if lastprice is not none %}
    <div class="price">{{ lastprice|chf }}</div>
{% endif %}
</aside>
{% elif lastaction == 'deposit' %}
<aside id="overlay">
    <h2>Deposit</h2>
{% if lastprice is not none %}
    <div class="price">{{ lastprice|chf }}</div>
{% endif %}
</aside>
{% endif %}
{% endif %}
{% 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 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 %}