{% 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>
    </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" 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 %}