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

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

<!--
        Header data
-->
{% block header %}
<script src="{% static 'js/jquery-globalize/lib/globalize.js' %}"></script>


<script type="text/javascript">

// Initialise the datepicker for the modal dialog
function custom_modal_init()
{
    init_weight_datepicker();
}


$(document).ready(function () {

    $.getJSON("/weight/api/get_weight_data/", function(json) {
        weight_chart(json);
    });
});
</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>

<p>
<a href="{% url 'weight-add' %}"
   class="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>

{% endblock %}


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


<h3>{% trans "Options" %}</h3>
<p>
    <a href="{% url 'wger.weight.views.export_csv' %}"
       target="_blank">
    <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' %}">
    <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>


{% endblock %}
