{% 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/>
    {# Links to deposit two common amounts of cash.  TODO: Will be replaced by a nicer UI later (#20) #}
    <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>
    <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">
            <a href="/buy?pid={{ product.id }}">
                <span class="thumblist-title">{{ product.name }}</span>
                <span class="thumblist-detail">Price:
                    {% if authuser.is_member %}
                        {{ product.price_member|chf }}
                    {% else %}
                        {{ product.price_non_member|chf }}
                    {% endif %}
                </span><br/>
                <div class="imgcontainer">
                    <img src="/static/upload/thumbnails/products/{{ product.id }}.png" alt="Picture of {{ product.name }}"/>
                    <span class="thumblist-stock">{{ product.stock }}</span>
                </div>
            </a>
        </div>
    {% endfor %}
    <br/>
    {# Logout link #}
    <a href="/logout">Logout</a>

    {{ super() }}

{% endblock %}