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

{% block header %}
<script src="{% static 'js/tinymce/tinymce.min.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 %}

{% if exercise.status == exercise.EXERCISE_STATUS_PENDING %}
<div class="alert">
<h3>{% trans "Exercise is pending review" %}</h3>
<p>{% blocktrans %}This user submitted exercise is pending a decision to be
included in the database.{% endblocktrans %}
{% trans "Till then, it will not be shown in the overview or the search."  %}
{% if perms.exercises %}{% trans "Please select one of the options below." %}{% endif %}
</p>

{% if perms.exercises %}
<div data-role="controlgroup">
    <a href="{% url 'exercise-decline' exercise.id %}"
       data-role="button">
        <img src="{% static 'images/icons/status-off.svg' %}"
            width="32"
            height="32"
            alt="{% trans 'Decline' %}">
        {% trans "Decline" %}
    </a>
    <a href="{% url 'exercise-accept' exercise.id %}"
       data-role="button">
        <img src="{% static 'images/icons/status-on.svg' %}"
            width="32"
            height="32"
            alt="{% trans 'Accept' %}">
        {% trans "Accept" %}
    </a>
</div>
{% endif %} {# end check permissions #}

</div>
{% endif %} {# end exercise is pending review #}


<p><strong>{% trans "Category" %}:</strong> {% trans exercise.category.name %}</p>
{% if exercise.equipment.all %}
    <p><strong>{% trans "Equipment" %}:</strong>
        {% for equipment in exercise.equipment.all %}
            {% trans equipment.name %}
            {% if not forloop.last %}, {% endif %}
        {% endfor %}
    </p>
{% endif %}

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

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

<ul>
{% for comment in comments %}
    <li>
        {{ comment }}
        {% if perms.exercises %}
        <span class="editoptions">
            <a href="{% url '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' %}">
               <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' %}"
       data-role="button">
        <img src="{% static 'images/icons/add.svg' %}"
            width="16"
            height="16"
            alt="{% trans 'Add new comment' %}">
        {% trans "Add new comment" %}</a>
</p>
{% endif %}


{#        #}
{# Images #}
{#        #}
{% with images=exercise.exerciseimage_set.all %}
{% if images %}
    <h4>{% trans "Images" %}</h4>

    <div class="image-gallery">
    {% for image in images %}
        <div data-role="popup"
             id="image-popup-{{image.pk}}"
             data-overlay-theme="a"
             class="ui-content">
                <h3>{% trans "Download" %}</h3>

                <a href="{{ image.image.url }}"
                   target="_blank"
                   class="image-link"
                   data-role="button">
                     {% trans "Full size" %}</a>

                <a href="{{ image.image|thumbnail_url:'large' }}"
                   target="_blank"
                   class="image-link"
                   data-role="button">
                     {% trans "Reduced size" %}</a>

                <h3>{% trans "License" %}</h3>
                <p>
                    {{image.get_license_display}}
                    {% if image.license_author %}
                         – {{image.license_author}}
                    {% endif %}
                </p>

                {% if perms.exercises.change_exerciseimage %}
                    <h3>{% trans "Options" %}</h3>
                    <a href="{% url 'exerciseimage-delete' exercise.pk image.pk %}"
                       data-role="button">
                       <img src="{% static 'images/icons/trash.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Delete' %}">
                         {% trans 'Delete' %}</a>

                    <a href="{% url 'exerciseimage-edit' image.pk %}"
                       data-role="button"
                       data-ajax="false">
                       <img src="{% static 'images/icons/edit.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Edit' %}">
                         {% trans 'Edit' %}</a>
                 {% endif %}
        </div>

        <div class="image-box">
            <div class="boxInner">
                <a href="#image-popup-{{image.pk}}"
                   data-rel="popup"
                   data-position-to="window">
                <img src="{{ image.image|thumbnail_url:'medium' }}"
                     alt=""
                     class="gallery-image">
                 </a>
            </div>
        </div>
    {% endfor %}
    </div>

{% endif %}
{% endwith %}

{% if perms.exercises %}
<p>
    <a href="{% url 'exerciseimage-add' exercise.id %}"
       title="{% trans 'Add' %}"
       data-ajax="false">
        <img src="{% static 'images/icons/add.svg' %}"
            width="16"
            height="16"
            alt="{% trans 'Add new image' %}">
        {% trans "Add new image" %}</a>
</p>
{% endif %}


{% 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>

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


<div class="ui-grid-a">
    <div class="ui-block-a">
        <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 class="ui-block-b">
        <div id="muscle-back" 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="ui-grid-a">
    <div class="ui-block-a">
        <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 class="ui-block-b">
        <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>


{% endif %}
{% endwith %}
{% endwith %} {# end musclelist #}

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

{% render_weight_log logs svg_uuid %}
<script>
$(document).ready(function() {

    // Init the data toggle for the weight log tables
    toggle_weight_log_table();

    // Draw the user's weight log chart
    weight_log_chart({{json|safe}},
                     "{{svg_uuid}}",
                     "{{reps}}",
                     $('#content').width() * 0.95)
});
</script>
{% endif %}

{% endblock %}


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

<h3>{% trans "Options" %}</h3>
<p>
    <a href="{% url 'exercise-overview' %}"
       data-role="button">
        <img src="{% static 'images/icons/list.svg' %}"
             width="32"
             height="32"
             alt="{% trans 'Back to overview' %}"
             >
        {% trans "Back to exercise overview" %}
    </a>
</p>
{% if perms.exercises %}
<p>
    <a href="{% url 'exercise-edit' exercise.id %}"
       data-role="button">
        <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 %}"
       data-role="button">
        <img src="{% static 'images/icons/trash.svg' %}"
             width="32"
             height="32"
             alt="{% trans 'Delete' %}">
        {% trans "Delete" %}
    </a>
</p>
{% endif %}


{% license_sidebar exercise.license exercise.license_author %}

{% endblock %}
