{% extends "base.html" %}

{% from "macros.html" import diagram with context %}

{% block title %}Bodyweight{% endblock %}

{% block content_title %}Bodyweight{% endblock %}

{% block content %}
{{ diagram("bodyweight", intervals, current) }}
<div class="container has-text-centered">
    <form action="bodyweight" method="post">
        <div class="field has-addons has-addons-centered mx-2">
            <div class="control">
                <input class="input" type="date" name="date" value="{{ today }}" required="required" />
            </div>
            <div class="control">
                <input class="input" type="number" name="weight" min="0" step="0.1" placeholder="weight (kg)" required="required" />
            </div>
            <div class="control">
                <input class="button is-success" type="submit" value="Submit"/>
            </div>
        </div>
    </form>
</div>
<div class="table-container mt-4">
    <table class="table is-fullwidth is-narrow is-striped has-text-centered">
        <thead>
            <tr>
                <th>Date</th>
                {% for name, description in [
                    ("Weight", "Weight in kg"),
                    ("Avg. Weight", "Central moving average of 9 values"),
                    ("Avg. Change", "Interpolated average weight change within the last 7 days in percent"),
                ] %}
                <th>
                    <div class="dropdown is-hoverable">
                        <div class="dropdown-trigger">
                            {{ name }}
                        </div>
                        <div class="dropdown-menu" role="menu">
                            <div class="dropdown-content">
                                <div class="dropdown-item">
                                    {{ description }}
                                </div>
                            </div>
                        </div>
                    </div>
                </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for datetime, weight, avg_weight, avg_weight_change in bodyweight %}
            <tr>
                <td>{{ datetime.date() }}</td>
                <td>{{ weight }}</td>
                <td>{{ avg_weight }}</td>
                <td>{{ avg_weight_change }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% set parent_page = 'index_view' %}
