{% extends "base_wide.html" %}
{% load url from future %}
{% load i18n %}
{% load staticfiles %}

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


{% block header %}
<script>

function highlight_muscle(element)
{
    var div_id = $(element).data('target');
    var is_front = ($(element).data('isFront') == 'True') ? 'front' : 'back';
    var muscle_id = div_id.match(/\d+/);

    // Reset all other highlighted muscles
    $('.muscle').removeClass('muscle-active');
    $('.muscle').addClass('muscle-inactive');

    // Hightligh the current one
    $(element).removeClass('muscle-inactive');
    $(element).addClass('muscle-active');


    // Set the corresponding background
    $('#muscle-system').css('background-image',
                            'url(/static/images/muscles/main/muscle-' + muscle_id + '.svg),'
                          + 'url(/static/images/muscles/muscular_system_' + is_front + '.svg)');

    // Show the corresponding exercises
    $('.exercise-list').hide();
    $('#' + div_id).show();
}

$(document).ready(function() {
    //Prefetch the background images
    {% for muscle in muscle_list|first %}
        prefetch_images(['/static/images/muscles/main/muscle-' + {{muscle.id}} + '.svg']);
    {% endfor %}
    prefetch_images(['/static/images/muscles/muscular_system_back.svg']);


    // Hightlight the first element
    highlight_muscle($('.muscle').first());

    // Highlight on hover
    $('.muscle').hover(function(e) {
        e.preventDefault();
        highlight_muscle(this);
    });
});
</script>
{% endblock %}


<!--
        Main Content
-->
{% block content %}
{% trans "Hover with the mouse over the muscles to show corresponding exercises." %}

<div class="ym-grid linearize-level-1">
    <div class="ym-g33 ym-gl">
        <div class="ym-gbox-left">
            <h3 style="padding-bottom:0.5em;">{% trans "Muscles" %}</h3>
            <div id="muscle-system"
                 class="muscle-background"
                 style="background-image: url('/static/images/muscles/muscular_system_front.svg');">
            </div>
        </div>
    </div>
    <div class="ym-g33 ym-gl">
        <div class="ym-gbox-left">
            {# Why do we need to use |first? #}
            {% regroup muscle_list|first by is_front as muscle_group %}
            {% for group in muscle_group %}
                {% if group.grouper %}
                    <h3>{% trans "Front" %}</h3>
                {% else %}
                    <h3>{% trans "Back" %}</h3>
                {% endif %}

                <ul class="muscle-list">
                {% for muscle in group.list %}
                <li class="muscle"
                    data-target="muscle-{{muscle.id}}"
                    data-is-front="{{muscle.is_front}}"
                    itemscope itemtype="http://schema.org/Muscle">
                    <span itemprop="name">{{muscle.name}}</span>
                    
                    {% if perms.exercises %}
                        <span style="float:right;">
                            <a href="{% url 'muscle-edit' muscle.id %}"
                               class="modal-dialog no-hover">
                               <img src="{% static 'images/icons/edit.svg' %}"
                                    width="16"
                                    height="16"
                                    alt="{% trans 'Edit muscle' %}"
                                    title="{% trans 'Edit muscle' %}"></a>
                                    
                            <a href="{% url 'muscle-delete' muscle.id %}"
                               class="modal-dialog no-hover">
                               <img src="{% static 'images/icons/trash.svg' %}"
                                    width="16"
                                    height="16"
                                    alt="{% trans 'Delete muscle' %}"
                                    title="{% trans 'Delete muscle' %}"></a>
                        </span>
                    {% endif %}
                </li>
                {% endfor %}
                </ul>
            {% endfor %}
        </div>
    </div>
    <div class="ym-g33 ym-gr">
        <div class="ym-gbox-right">
            {% for muscle in muscle_list|first %}
                <div id="muscle-{{muscle.id}}" style="display:none;" class="exercise-list">
                    <h3>{% trans "Exercises" %}</h3>
                    <ul class="exercise-overview">
                        {% for exercise in muscle.exercise_set.select_related %}
                        {% if exercise.category.language == language %}
                        <li class="exercise">
                            <a href="{{exercise.get_absolute_url}}">{{exercise}}</a>
                        </li>
                        {% endif %}
                        {% empty %}
                        <li>
                            <em>{% trans "No exercises that mainly train this muscle" %}</em>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

{% if perms.exercises %}
<h3>{% trans "Options" %}</h3>

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

<p>{% blocktrans %}<strong>Important:</strong> After adding a muscle, you need
to create a new SVG image with the contours of the muscle and place it in the
folder <em>images/muscles</em>.{% endblocktrans %}</p>
{% endif %}

{% endblock %}


<!--
        Side bar
-->
{% block sidebar %}
{% endblock %}
