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

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


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

<script>
$(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(), {% if perms.exercises %}true{% else %}false{% endif %});

    // Highlight on hover
    $('.muscle').hover(function(e) {
        e.preventDefault();
        highlight_muscle(this, {% if perms.exercises %}true{% else %}false{% endif %});
    });

    // Highlight on click

});
</script>
{% endblock %}


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

<div class="row">
    <div class="col-sm-4 col-xs-6">
        <h4 style="padding-bottom:0.5em;">{% trans "Muscles" %}</h4>
        <div id="muscle-system"
             class="muscle-background"
             style="background-image: url('/static/images/muscles/muscular_system_front.svg');">
        </div>
    </div>
    <div class="col-sm-4 col-xs-6">
        {# 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 %}
                <h4>{% trans "Front side" %}</h4>
            {% else %}
                <h4>{% trans "Back side" %}</h4>
            {% endif %}

            <ul class="muscle-list">
            {% for muscle in group.list %}
            <li class="muscle"
                data-target="muscle-{{muscle.id}}"
                data-is-front="{{muscle.is_front}}"
                data-name="{{muscle.name}}"
                itemscope itemtype="http://schema.org/Muscle">
                <span itemprop="name">{{muscle.name}}</span>
            </li>
            {% endfor %}
            </ul>
        {% endfor %}
    </div>
    <div class="col-sm-4 col-xs-12">
        {% for muscle in muscle_list|first %}
            <div id="muscle-{{muscle.id}}" style="display:none;" class="exercise-list">
                <h4>{% trans "Exercises" %}</h4>
                <ul class="exercise-overview">
                    {% for exercise in muscle.exercise_set.select_related %}
                    {% if exercise.language in active_languages %}
                    <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>
{% endcache %}

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

<p>
<a href="{% url 'exercise:muscle:add' %}"
   title="{% trans 'Add muscle' %}"
   {% auto_link_css flavour "wger-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>


<div id="muscle-edit-box" style="display:none;">
<p>
    <a href="{% url 'exercise:muscle:edit' 1 %}"
       {% auto_link_css flavour "wger-modal-dialog" %}
       id="muscle-edit-edit-link">
       <img src="{% static 'images/icons/edit.svg' %}"
            width="32"
            height="32"
            alt="{% trans 'Edit muscle' %}"
            title="{% trans 'Edit muscle' %}">{% trans 'Edit muscle' %}: <span class="muscle-edit-name"></span></a>
</p>
<p>
    <a href="{% url 'exercise:muscle:delete' 1 %}"
       {% auto_link_css flavour "wger-modal-dialog" %}
       id="muscle-edit-delete-link">
      <img src="{% static 'images/icons/trash.svg' %}"
            width="32"
            height="32"
            alt="{% trans 'Delete muscle' %}"
            title="{% trans 'Delete muscle' %}">{% trans 'Delete muscle' %}: <span class="muscle-edit-name"></span></a>
</p>
</div>
{% endif %}

{% endblock %}


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