{###############}
{# Graphs etc. #}
{###############}
    <form style="position: absolute; right: 15%; width: 15%; height: 15%;">
        <button type="button" id="logout_button" onclick="logout()" style="width: 100%; height: 100%;">logout</button>
    </form>

    <h1>Hello, {{ name }}!</h1>

    <p id="eventMsg"></p>
    <p id="nextStep"></p>

    {% if counts|length > 0 %}
    <p>You've had
    {% for c in counts %}
        {%- if counts|length > 1 -%}
            {%- if loop.last -%}
                {%- if counts|length > 2 -%}
                    ,
                {% endif %}
                and
            {%- elif not loop.first -%}
                ,
            {% endif %}
        {% endif %}
        {{ c[1] }}
        {% if c[0] == "" %}
            other beverage
        {%- else -%}
            {{ c[0] }}
        {%- endif -%}
        {%- if c[1] != 1 -%}s{%- endif -%}
    {% endfor %}
    today.</p>
    {% endif %}

    <img src="{{ url_for('coffee_graph_history', _external=True, stamp=stamp) }}">
    <img src="{{ url_for('coffee_graph_flavors', _external=True, stamp=stamp) }}">

    <p>
        {% if flavors %}
        <form>
        {% for flavor in flavors %}
        <input type="button" value="{{ flavor }}" onclick="addCoffee(this.value)" style="padding: 1.2%; margin: 3px">
        {% endfor %}
        </form>
        {% endif %}
    </p>

{##########}
{# Events #}
{##########}

{% include "events.html" %}

{##################################}
{# User name and chip idnetifiers #}
{##################################}
    <br />
    <p>
        <form>
            <label for="username">Username:</label>
            <input id="username" type="text" name="name">
            <input type="button" value="rename" onclick="renameUser()">
        </form>
    </p>
    <form>
        <table style="padding: 2px">
            <tr>
                <td colspan="4" align="center"><b>Identifiers:</b></td>
            </tr>
            {% for id in identifiers %}
            <tr>
                <td><input type="text" id="identifier_name_{{ loop.index }}" value="{{ id[2] }}" /></td>
                <td {% if iid == id[1] %} style="font-weight: bold" {% endif %}>#<span id="identifier_{{ loop.index }}">{{ id[1] }}</span></td>
                <td><input type="button" value="rename" onclick="renameIdentifier({{ loop.index }})" /></td>
                <td><input type="button" value="remove" onclick="disableIdentifier('{{ id[1] }}')" /></td>
            </tr>
            {% endfor %}
            <tr>
                <td><input type="button" id="addIdentifier" value="add identifier" onclick="addIdentifier_start()" /></td>
                <td colspan="2" style="visibility: hidden" id="labelIdentifier"><b>Use your identifier.</b></td>
                <td><input type="button" id="abortIdentifier" value="abort" disabled onclick="addIdentifier_finish()" /></td>
            </tr>
        </table>
    </form>