{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}
{% load wger_extras %}

{% block header %}
<style>
div.table {
    display:table;
    margin-top: 1em;
}
div.table > div {
    display:table-row;
}
div.table > div > div {
    display:table-cell;
    padding-left: 1em;
}
div.bmi-legend {
    width:1em;
    height:1em;
}
</style>


<script>
$(document).ready(function () {

    render_bmi({% if flavour = 'mobile'%}$('#content').width() * 0.95{% endif %});

    /*
     * Process the form
     */
    $("#bmi-form").click(function(e){
        e.preventDefault();
        render_bmi({% if flavour = 'mobile'%}$('#content').width() * 0.95{% endif %});
    });

});
</script>




{% endblock %}

<!--
        Title
-->
{% block title %}{% trans "BMI calculator" %}{% endblock %}


<!--
        Main Content
-->
{% block content %}

<form action="{% url 'bmi-calculate' %}"
      method="post"
      class="ym-form"
      id="bmi-form">
{% csrf_token %}

{% if form.non_field_errors %}
<div class="ym-fbox-text ym-error">
    {% for error in form.non_field_errors %}
        <p class="ym-message">{% trans error %}</p>
    {% endfor %}
</div>
{% endif %}

<table>
    {% for current_field in form %}
        {% yaml_form_field current_field %}
    {% endfor %}
    <tr>
        <td colspan="2">
            <input type="submit" value="{% trans 'Calculate' %}" id="form-save">
        </td>
    </tr>
</table>
</form>

<div id="bmi-result-container" style="display:hidden;">
    <h3>{% trans 'Results' %}</h3>
    <p>{% trans 'Your BMI is: ' %} <strong><span id="bmi-result-value">{{user.userprofile.calculate_bmi|floatformat:2}}</span></strong></p>
</div>



<div id="bmi-chart"></div>


<h3>{% trans "Legend" %}</h3>
<div class="table">
    <div>
        <div><div class="bmi-legend" style="background-color:#800000;">&nbsp;</div></div>
        <div>{% trans "Adipositas III" %}</div>
    </div>
    <div>
        <div><div class="bmi-legend" style="background-color:#ff0000;">&nbsp;</div></div>
        <div>{% trans "Adipositas II" %}</div>
    </div>
    <div>
        <div><div class="bmi-legend" style="background-color:#ff7f2a;">&nbsp;</div></div>
        <div>{% trans "Adipositas I" %}</div>
    </div>
    <div>
        <div><div class="bmi-legend" style="background-color:#ffff00;">&nbsp;</div></div>
        <div>{% trans "Overweight" %}</div>
    </div>
    <div>
        <div><div class="bmi-legend" style="background-color:#00ff00;">&nbsp;</div></div>
        <div>{% trans "Normal weight" %}</div>
    </div>
    <div>
        <div><div class="bmi-legend" style="background-color:#00ffff;">&nbsp;</div></div>
        <div>{% trans "Slight underweight" %}</div>
    </div>
    <div>
        <div><div class="bmi-legend" style="background-color:#0000ff;">&nbsp;</div></div>
        <div>{% trans "Moderate underweight" %}</div>
    </div>
    <div>
        <div><div class="bmi-legend" style="background-color:#000080;">&nbsp;</div></div>
        <div>{% trans "Strong underweight" %}</div>
    </div>
</div>


{% endblock %}


<!--
        Side bar
-->
{% block sidebar %}
<h3>Info</h3>
<p>
{% blocktrans %}Use the form to calculate your BMI (Body Mass Index).
If you have entered data in the weight section, the last entry will
be used automatically. Otherwise the weight you enter here will be saved
in a new entry.{% endblocktrans %}
</p>
{% endblock %}
