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

<!--
        Title
-->
{% block title %}{% trans "Weight overview" %}{% endblock %}

<!--
        Header data
-->
{% block header %}
<script type="text/javascript">
$(document).ready(function () {

    $.getJSON("/weight/api/get_weight_data/{{ owner_user.username }}", function(json) {
        weight_chart(json, $('#content').width());
    });
});
</script>
{% endblock %}


<!--
        Main Content
-->
{% block content %}
{% if not min_date %}
<p>
    {% trans "There is no chart here because there are no weight entries." %}
    {% trans "Use link to add one." %}
</p>
{% endif %}

<div id="weight_diagram"></div>

{% if is_owner %}
{% if last_five_weight_entries_details %} 
<table class="table">
    <tr>  
        <th>{% trans 'Date' %}</th>
        <th>{% trans 'Weight' %}</th>
        <th>{% trans 'Change' context "Noun, not verb" %}</th>
        <th>{% trans 'Days' %}</th>
    </tr>
    {% for entry_detail in last_five_weight_entries_details %}
        <tr>
            <td>{{ entry_detail.0.date }}</td>
            <td>{{ entry_detail.0.weight }}</td>
            <!-- weight diff and day diff below -->
            <td>
                {% if entry_detail.1 > 0 %}
                    +
                {% endif %}
                {% if entry_detail.1 %}
                    {{ entry_detail.1 }}
                {% else %}
                    -/-
                {% endif %}
            </td>
            <td>
                {% if entry_detail.2 %} 
                    {{ entry_detail.2 }}
                {% else %}
                    -/-
                {% endif %}
            </td>
        </tr>
    {% endfor %}
</table>
{% endif %}
<br/>
<p>
<a href="{% url 'weight:add' %}"
   {% auto_link_css flavour "wger-modal-dialog" %}
   id="add-weight-entry">{% trans "Add weight entry" %}</a>
</p>

<p>
    <em>{% trans "You can click on a value on the chart to edit it. "%}</em>
</p>
{% endif %}

{% endblock %}


<!--
        Side bar
-->
{% block sidebar %}
<h4>{% trans "Filter options" %}</h4>
<p>{% blocktrans %}
Use the second chart to pan or zoom by clicking and dragging the selection. Clicking
on the background resets it.
{% endblocktrans %}</p>


{% if is_owner %}
<h4>{% trans "Options" %}</h4>
<p>
    <a href="{% url 'weight:export-csv' %}"
       target="_blank"
       {% auto_link_css flavour %}>
    <img src="{% static 'images/icons/save.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Export as CSV' %}"
         title="{% trans 'Export as CSV' %}">
        {% trans "Export as CSV" %}
    </a>
</p>

<p>
    <a href="{% url 'weight:import-csv' %}" {% auto_link_css flavour %}>
    <img src="{% static 'images/icons/csv-table.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Import from spreadsheet' %}"
         title="{% trans 'Import from spreadsheet' %}">
        {% trans "Import from spreadsheet" %}
    </a>
</p>
{% endif %}

{% endblock %}
