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

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



{% block header %}
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script>

function custom_modal_init()
{
    init_tinymce();
}

$(document).ready(function() {
    // Init the tabs for the exercises
    $( "#tabs" ).tabs({

        // On selecting a category, set the values to edit it
        activate: function(event, ui) {
                category_id = ui.newTab.attr('id').match(/\d+/);
                $(".current-category-name").html($("#cat-" + category_id).text());
                $("#current-category-edit").attr("href", "/exercise/category/" + category_id + "/edit/");
                $("#current-category-delete").attr("href", "/exercise/category/" + category_id + "/delete/");
            }
    });

    // Prevent the form from being submited if JavaScript is enabled
    $("#exercise_search_form").submit(function() {return false;});

    // Init the autocompleter
    $("#exercise-search").catcomplete({
            source: "{% url 'wger.exercises.views.exercises.search' %}",
            minLength: 2,
            select: function(event, ui) {

                // Redirect to exercise after clicking on a result
                // Path is hard coded here, because we can't use the url-tag
                window.location.href = '/exercise/' + ui.item.id + '/view/'
            }
        });
});
</script>
{% endblock %}


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

{% cache cache_timeout exercise-overview language.id %}
{% regroup exercises by category as exercise_list %}
<div id="tabs">
    <ul>
        {% for item in exercise_list %}
        <li id="cat-{{ item.grouper.id }}">
            <a href="#cat{{ item.grouper.id }}">{% trans item.grouper.name %}</a>
        </li>
        {% empty %}
        <li>{% trans "No categories." %} {% trans "Use link to create one" %}</li>
        {% endfor %}
    </ul>

    {% for item in exercise_list %}
    <div id="cat{{ item.grouper.id }}">
        <table class="narrow">
        <tbody>
        {% for exercise in item.list %}
                <tr>
                    <td style="padding-left:0px;">
                        {% if exercise.main_image %}
                        <div style="width:60px;height:60px;text-align:center;float:left;">
                        <img src="{{ exercise.main_image.image|thumbnail_url:'thumbnail' }}"
                             alt=""
                             style="vertical-align:middle;max-width:100%; max-height:100%;">
                         </div>
                         {% endif %}

                        <a href="{{ exercise.get_absolute_url }}">
                        {{ exercise.name }}</a>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td>
                        <p>
                            {% trans "No exercises in this category. Add or edit an exercise and set its category" %}
                        </p>
                    </td>
                </tr>
        {% endfor %}
        </tbody>
        </table>
    </div>
    {% endfor %}
</div>
{% endcache %}


{% endblock %}


<!--
        Side bar
-->
{% block sidebar %}
<h3>{% trans "Add new exercise" %}</h3>
<p>
    {% if user.is_authenticated and not user.userprofile.is_temporary %}
    <a href="{% url 'exercise-add' %}">
    <img src="{% static 'images/icons/new.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Add new exercise' %}"
         title="{% trans 'Add new exercise' %}">
    {% trans "Add new exercise" %}
    </a>
    {% else %}
    <img src="{% static 'images/icons/new.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Add new exercise' %}"
         title="{% trans 'Add new exercise' %}">
    <span>
    {% trans "Only registered users can do this" %}
    </span>
    {% endif %}
</p>


{% if perms.exercises %}
    <h3>{% trans "Options" %}</h3>
        {% if exercises %}
        {% with exercise=exercises|first %}
        <p>
        <a href="{% url 'exercisecategory-edit' exercise.category.id %}"
           class="modal-dialog"
           id="current-category-edit">
            <img src="{% static 'images/icons/edit.svg' %}"
                 width="32"
                 height="32"
                 alt="{% trans 'Edit category' %}"
                 title="{% trans 'Edit category' %}">
                {% trans "Edit category" %}:
                <span class="current-category-name">{% trans exercise.category.name %}</span>
        </a>
        </p>

        <p>
        <a href="{% url 'exercisecategory-delete' exercise.category.id %}"
           class="modal-dialog"
           id="current-category-delete">
            <img src="{% static 'images/icons/trash.svg' %}"
                 width="32"
                 height="32"
                 alt="{% trans 'Delete category' %}"
                 title="{% trans 'Delete category' %}">
                {% trans "Delete category" %}:
                <span class="current-category-name">{% trans exercise.category.name %}</span>
        </a>
        </p>
        {% endwith %}
        {% endif %}

        <p>
        <a href="{% url 'exercisecategory-add' %}"
           class="modal-dialog">
            <img src="{% static 'images/icons/folder-new.svg' %}"
                 width="32"
                 height="32"
                 alt="{% trans 'Add category' %}"
                 title="{% trans 'Add category' %}">
         {% trans "Add category" %}
        </a>
    </p>
{% endif %}

    <h3>{% trans "Search" %}</h3>

    <div class="ui-widget">
        <form action="{% url 'wger.exercises.views.exercises.search' %}"
              method="get"
              id="exercise_search_form">
            {% csrf_token %}
            <input name="term"
                   type="search"
                   id="exercise-search"
                   class="ajax-form-element"
                   placeholder="{% trans 'exercise name' %}"
                   style="width:100%;">
       </form>
    </div>
{% endblock %}
