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

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



{% block header %}
<script>
$(document).ready(function() {

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var category_id = $(e.target).attr('id').match(/\d+/);
        $(".current-category-name").html($("#category-" + 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 'exercise-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 %}
<ul class="nav nav-tabs">
    {% for item in exercise_list %}
    <li {% if forloop.first %}class="active"{% endif %}>
        <a href="#tab-{{ item.grouper.id }}" id="category-{{ item.grouper.id }}" data-toggle="tab">{% trans item.grouper.name %}</a>
    </li>
    {% empty %}
        <li>{% trans "No categories." %} {% trans "Use link to create one" %}</li>
    {% endfor %}
</ul>

<div class="tab-content">
    {% for item in exercise_list %}
    <div class="tab-pane {% if forloop.first %}active{% endif %}" id="tab-{{ item.grouper.id }}">
        <div class="list-group">
        {% for exercise in item.list|dictsort:"name" %}
            <a href="{{ exercise.get_absolute_url }}" class="list-group-item">
                <div class="visible-xs">
                    <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                </div>
                <div class="media">
                    <div style="width:60px;height:60px;" class="media-left">

                    {% if exercise.main_image %}
                        <img alt="{{ exercise.name }}"
                         class="media-object "
                         style="max-width:100%; max-height:100%;"
                         src="{{ exercise.main_image.image|thumbnail_url:'thumbnail' }}">
                    {% else %}
                    <img alt="{% trans 'Placeholder image for exercise' %}"
                         class="media-object "
                         style="max-width:100%; max-height:100%; opacity: 0.4;"
                         src="{% static 'images/icons/image-placeholder.svg' %}">
                    {% endif %}
                    </div>
                    <div class="media-body" style="position: absolute; top: 10px; left: 100px;">
                        <h4 class="media-heading">{{ exercise.name }}</h4>
                        <span class="text-muted">
                            {% for equipment in exercise.equipment.all %}
                                {% trans equipment.name %}
                                {% if not forloop.last %},{% endif %}
                            {% endfor %}
                        </span>
                     </div>
                </div>
            </a>
        {% empty %}
            <a href="#" class="list-group-item">
                <div class="col-md-offset-1 col-md-10" >
                    {% trans "No exercises in this category. Add or edit an exercise and set its category" %}
                </div>
            </a>
        {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>


{% endcache %}


{% endblock %}


<!--
        Side bar
-->
{% block sidebar %}
<h4>{% trans "Add new exercise" %}</h4>
<p>
    {% if user.is_authenticated and not user.userprofile.is_temporary %}
    <a href="{% url 'exercise:exercise:add' %}" {% auto_link_css flavour %}>
    <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 %}
    <h4>{% trans "Options" %}</h4>
        {% if exercises %}
        {% with exercise=exercises|first %}
        <p>
        <a href="{% url 'exercise:category:edit' exercise.category.id %}"
           {% auto_link_css flavour "wger-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 'exercise:category:delete' exercise.category.id %}"
           {% auto_link_css flavour "wger-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 'exercise:category:add' %}"
           {% auto_link_css flavour "wger-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 %}

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

    <form action="{% url 'exercise-search' %}"
          method="get"
          id="exercise_search_form">
        {% csrf_token %}
        <input name="term"
               type="search"
               id="exercise-search"
               class="ajax-form-element form-control"
               placeholder="{% trans 'exercise name' %}"
               >
   </form>
{% endblock %}
