{% extends "baselayout.html" %}

{% load i18n %}

{% block title %}
{% translate "Drinks - Statistics" %}
{% endblock %}

{% block content %}
<h1>{% translate "Statistics" %}</h1>
<div class="statistics-container">
    <div class="flex flex-column">
        <h3>{% translate "orders / drink" %}</h3>
        <table>
            <tr>
                <th>{% translate "drink" %}</th>
                <th>{% translate "all" %}</th>
                <th>{% translate "you" %}</th>
            </tr>
            {% for key, values in orders_per_drink.items %}
            <tr>
                <td>{{ key }}</td>
                <td>{{ values.a|default:"0" }}</td>
                <td>{{ values.b|default:"0" }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <div class="flex flex-column">
        <h3>{% translate "orders / month" %}</h3>
        <table>
            <tr>
                <th>{% translate "month" %}</th>
                <th>{% translate "all" %}</th>
                <th>{% translate "you" %}</th>
            </tr>
            {% for key, values in orders_per_month.items %}
            <tr>
                <td>{{ key }}</td>
                <td>{{ values.a|default:"0" }}</td>
                <td>{{ values.b|default:"0" }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
    <div class="flex flex-column">
        <h3>{% translate "orders / weekday" %}</h3>
        <table>
            <tr>
                <th>{% translate "day" %}</th>
                <th>{% translate "all" %}</th>
                <th>{% translate "you" %}</th>
            </tr>
            {% for values in orders_per_weekday %}
            <tr>
                <td>{{ values.0 }}</td>
                <td>{{ values.1|default:"0" }}</td>
                <td>{{ values.2|default:"0" }}</td>
            </tr>
            {% endfor %}
        </table>
    </div>
<script src="/static/js/autoreload.js"></script>
{% endblock %}