{% extends "base.html" %}

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

{% block title %}Body fat{% endblock %}

{% block content_title %}Body fat{% endblock %}

{% block content %}
{{ diagram("bodyfat", intervals, current) }}
<div class="container has-text-centered mx-2">
    <form action="bodyfat" method="post">
        <div class="field">
            <div class="control">
                <input class="input" type="date" name="date" value="{{ today }}" required="required" />
            </div>
        </div>
        <fieldset class="fieldset mb-4">
            <legend>3-Site Caliper Method</legend>
            {% for name in sites_3 %}
            <div class="field">
                <div class="control">
                    <input class="input" type="number" min="0" max="99" name="{{ name }}" step="1" placeholder="{{ name|capitalize }}" />
                </div>
            </div>
            {% endfor %}
        </fieldset>
        <fieldset class="fieldset mb-4">
            <legend>Additionally for 7-Site Caliper Method</legend>
            {% for name in additional_sites_7 %}
            <div class="field">
                <div class="control">
                    <input class="input" type="number" min="0" max="99" name="{{ name }}" step="1" placeholder="{{ name|capitalize }}" />
                </div>
            </div>
            {% endfor %}
        </fieldset>
        <div class="field">
            <div class="control">
                <input class="button is-success" style="width: 25%" 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 [
                    ("Body fat (3)", "Body fat percentage using Jackson-Pollock 3-site skinfold formula"),
                    ("Body fat (7)", "Body fat percentage using Jackson-Pollock 7-site skinfold formula"),
                    ("Chest", "Diagonal fold, halfway between armpit and nipple"),
                    ("Abdominal", "Vertical fold, 2 cm to the right of navel"),
                    ("Tigh", "Vertical fold, halfway between hipbone and kneecap"),
                    ("Tricep", "Vertical fold, halfway between shoulder and elbow"),
                    ("Subscapular", "Diagonal fold, directly below shoulder blade"),
                    ("Suprailiac", "Diagonal fold, directly above hip bone"),
                    ("Midaxillary", "Vertical fold, directly below armpit"),
                ] %}
                <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, chest, abdominal, tigh, tricep, subscapular, suprailiac, midaxillary, fat3, fat7 in bodyfat %}
            <tr>
                <td>{{ datetime.date() }}</td>
                <td>{{ fat3|round(2)|replace('nan', '-') }}</td>
                <td>{{ fat7|round(2)|replace('nan', '-') }}</td>
                <td>{{ chest|int }}</td>
                <td>{{ abdominal|int }}</td>
                <td>{{ tigh|int }}</td>
                <td>{{ tricep|int }}</td>
                <td>{{ subscapular|int }}</td>
                <td>{{ suprailiac|int }}</td>
                <td>{{ midaxillary|int }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% set parent_page = 'index_view' %}
