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

{% block title %}{% trans "Preferences" %}{% endblock %}

{% block header %}
 <script>
$(function() {
    //$("#preferences-accordion").accordion({
    //    heightStyle: "content"
    //});
});
</script>
{% endblock %}



{% block content %}
<form action="{% url 'core:user:preferences' %}"
      method="post"
      class="form-horizontal">
    {% csrf_token %}
    {{ form.non_field_errors }}

    <div class="panel-group" id="preferences-accordion">

        <div class="panel panel-default">
            <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" data-parent="#preferences-accordion" href="#collapseEmail">
                {% trans "Email" %}
                </a>
            </h4>
            </div>
            <div id="collapseEmail" class="panel-collapse collapse in">
            <div class="panel-body">
                {% render_form_field email_form.email %}
                {% render_form_field email_form.first_name %}
                {% render_form_field email_form.last_name %}
            </div>
            </div>
        </div>


        <div class="panel panel-default">
            <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" data-parent="#preferences-accordion" href="#collapseReminder">
                {% trans "Workout reminders" %}
                </a>
            </h4>
            </div>
            <div id="collapseReminder" class="panel-collapse collapse">
            <div class="panel-body">
                {% render_form_field form.workout_reminder_active %}
                {% render_form_field form.workout_duration %}
                {% render_form_field form.workout_reminder %}
            </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" data-parent="#preferences-accordion" href="#collapseGymMode">
                {% trans "Gym mode" %} ({% trans "mobile version only" %})
            </a>
            </h4>
            </div>
            <div id="collapseGymMode" class="panel-collapse collapse">
            <div class="panel-body">
                {% render_form_field form.timer_active %}
                {% render_form_field form.timer_pause %}
            </div>
            </div>
        </div>


        <div class="panel panel-default">
            <div class="panel-heading">
            <h3 class="panel-title">
                <a data-toggle="collapse" data-parent="#preferences-accordion" href="#collapseOther">
                {% trans "Other settings" %}
            </a>
            </h4>
            </div>
            <div id="collapseOther" class="panel-collapse collapse">
            <div class="panel-body">
                {% render_form_field form.ro_access %}
                {% render_form_field form.notification_language %}
                {% render_form_field form.weight_unit %}
                {% render_form_field form.show_comments %}
                {% render_form_field form.show_english_ingredients %}
                {% render_form_field form.num_days_weight_reminder %}
            </div>
            </div>
        </div>
    </div>


    <div class="form-group">
        <div class="col-md-12">
            <input type="submit" value="{% trans 'Save' %}" id="form-save" class="btn btn-default btn-block">
        </div>
    </div>
</form>
{% endblock %}


{% block sidebar %}
<h4>{% trans "Options" %}</h4>
<p>
    <a href="{% url 'core:user:logout' %}" {% auto_link_css flavour "browserid-logout" %}>
    <img src="{% static 'images/icons/logout.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Logout' %}"
         title="{% trans 'Logout' %}">
    {% trans "Logout" %}</a>
</p>
<p>
    <a href="{% url 'core:user:change-password' %}" {% auto_link_css flavour "wger-modal-dialog" %}>
    <img src="{% static 'images/icons/preferences.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Change password' %}"
         title="{% trans 'Change password' %}">
    {% trans "Change password" %}</a>
</p>
<p>
    <a href="{% url 'core:user:api-key' %}" {% auto_link_css flavour %}>
    <img src="{% static 'images/icons/internet.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'API key' %}"
         title="{% trans 'API key' %}">
    {% trans "API key" %}</a>
</p>

<p style="margin-top: 2em;">
    <a href="{% url 'core:user:delete' %}" {% auto_link_css flavour "wger-modal-dialog" %}>
    <img src="{% static 'images/icons/trash.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Delete account' %}"
         title="{% trans 'Delete account' %}">
    {% trans "Delete account" %}</a>
 </p>
{% endblock %}
