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


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

<script>
function custom_modal_init()
{
    // Set up the tinyMCE editor on modal dialogs
    init_tinymce();

    // Initialise the datepicker for the modal dialog
    init_weight_log_datepicker();
}
</script>
{% endblock %}
<!--
        Title
-->
{% block title %}{{ exercise.name }}{% endblock %}


<!--
        Main Content
-->
{% block content %}
<p>{% trans "Category" %}: <strong>{{ exercise.category.name }}</strong></p>

<p>{{ exercise.description|safe }}</p>

{% with comments=exercise.exercisecomment_set.all %}
{% if comments %}
<h3>{% trans "Comments for this exercise" %}</h3>

<ul>
{% for comment in comments %}
    <li>
        {{ comment }}
        {% if perms.exercises %}
        <span class="editoptions">
            <a href="{% url wger.exercises.views.exercisecomment_delete comment.id %}"
               title="{% trans 'Delete' %}">
               <img src="{% static 'images/icons/trash.svg' %}"
                    width="16"
                    height="16"
                    alt="{% trans 'Delete' %}">
            </a>
            <a href="{% url exercisecomment-edit comment.id %}"
               title="{% trans 'Edit' %}"
               class="modal-dialog">
               <img src="{% static 'images/icons/edit.svg' %}"
                    width="16"
                    height="16"
                    alt="{% trans 'Edit' %}">
            </a>
        </span>
        {% endif %}
    </li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}


{% if perms.exercises %}
<p>
    <a href="{% url exercisecomment-add exercise.id %}"
       title="{% trans 'Add' %}"
       class="modal-dialog">
        <img src="{% static 'images/icons/add.svg' %}"
            width="16"
            height="16"
            alt="{% trans 'Add new comment' %}">
        {% trans "Add new comment" %}</a>
</p>
{% endif %}


{% if logs %}

<h3>{% trans "Weight log" %}</h3>

{% render_weight_log logs svg_uuid %}
<script src="{% static 'js/d3.js' %}"></script>
<script src="{% static 'js/jquery-globalize/lib/globalize.js' %}"></script>

<script>
$(document).ready(function() {
weight_log_chart({{json|safe}}, "{{svg_uuid}}", "{{reps}}")
});
</script>



{% endif %}

{% endblock %}


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

<h3>{% trans "Back to overview" %}</h3>
<p>
    <a href="{% url wger.exercises.views.exercise_overview %}">
        <img src="{% static 'images/icons/list.svg' %}"
             width="32"
             height="32"
             alt="{% trans 'Back to overview' %}"
             >
        {% trans "Back to exercise overview" %}
    </a>
</p>



{% with muscles=exercise.muscles.all %}
{% with muscles_secondary=exercise.muscles_secondary.all %}

{% if muscles %}
<h3>{% trans "Muscles" %}</h3>
<p>
    {% trans "The diagram shows the most used muscles on this exercise" %}
</p>


<div>
    <div style="width:1em;height:1em;background-color:#cc0000;float:left;margin-right:0.5em;"></div>
    {% trans "Main muscles" %}
</div>

{% if muscles_secondary %}
<div>
    <div style="width:1em;height:1em;background-color:#f57900;float:left;margin-right:0.5em;"></div>
    {% trans "Secondary muscles" %}
</div>
{% endif %}

{% if muscle_backgrounds_front %}
<div class="ym-grid linearize-level-1">
    <div class="ym-g50 ym-gl">
        <div class="ym-gbox-left">
            <div id="muscle-front" class="muscle-background" style="background-image: {% for background in muscle_backgrounds_front %}url({% static background %}){% if not forloop.last %},{% endif %}{% endfor %};">
            </div>
        </div>
    </div>
    <div class="ym-g40 ym-gr">
        <div class="ym-gbox-right">
            <ul>
                {% for muscle in muscles %}
                {% if muscle.is_front %}
                <li>{{muscle.name}}</li>
                {% endif %}
                {% endfor %}

                {% for muscle in muscles_secondary %}
                {% if muscle.is_front %}
                <li>{{muscle.name}}</li>
                {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}


{% if muscle_backgrounds_back %}
<div class="ym-grid linearize-level-1">
    <div class="ym-g50 ym-gl">
        <div class="ym-gbox-left">
            <div id="muscle-front" class="muscle-background" style="background-image: {% for background in muscle_backgrounds_back %}url({% static background %}){% if not forloop.last %},{% endif %}{% endfor %};">
            </div>
        </div>
    </div>
    <div class="ym-g40 ym-gr">
        <div class="ym-gbox-right">
            <ul>
                {% for muscle in muscles %}
                {% if not muscle.is_front %}
                <li>{{muscle.name}}</li>
                {% endif %}
                {% endfor %}

                {% for muscle in muscles_secondary %}
                {% if not muscle.is_front %}
                <li>{{muscle.name}}</li>
                {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
</div>
{% endif %}

{% endif %}
{% endwith %}
{% endwith %}


{% if perms.exercises %}
<h3>{% trans "Options" %}</h3>
<p>
    <a href="{% url exercise-edit exercise.id %}">
        <img src="{% static 'images/icons/edit.svg' %}"
             width="32"
             height="32"
             alt="{% trans 'Edit' %}"
             >
        {% trans "Edit" %}
    </a>
</p>
<p>
    <a href="{% url exercise-delete exercise.id %}"
       class="modal-dialog">
	<img src="{% static 'images/icons/trash.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Delete' %}">
	    {% trans "Delete" %}
    </a>
</p>
{% endif %}

{% cc_by_sa_sidebar language %}

{% endblock %}
