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

{#           #}
{# Opengraph #}
{#           #}
{% block opengraph %}
    {{ block.super }}
    <meta property="og:title" content="{% trans 'Workout' %}">
    <meta property="og:description" content="{{ workout }} / {{owner_user.username}}">
{% endblock %}


{#       #}
{# Title #}
{#       #}
{% block title %}{% trans "Workout" %} – {{ workout.creation_date }}{% endblock %}


{#        #}
{# Header #}
{#        #}
{% block header %}
<script>
function custom_modal_init()
{
    // Set up the edit set functions on modal dialogs
    init_edit_set();
}

$(document).ready(function() {	
    // Allow the sets to be sortable
    setup_sortable();

    // Show/Hide the comments to the exercises
    {% if user.userprofile.show_comments %}
        $(".exercise-comments").show();
    {% else %}
        $(".exercise-comments").hide();
    {% endif %}
    toggle_comments();
 });
</script>
{% endblock %}


{#         #}
{# Content #}
{#         #}
{% block content %}


{% if workout.comment %}
<p>
    <strong>{% trans "Goal" %}:</strong> {{workout.comment}}
</p>
{% endif %}

{% for day in workout.canonical_representation.day_list %}
    <div id="div-day-{{ day.obj.id }}">
        {% render_day day.obj is_owner %}
    </div>
{% empty %}
    {% if is_owner %}
        <p>
            <a href="{% url 'manager:day:add' workout.id %}" class="wger-modal-dialog btn btn-default btn-block">
            {% trans "No days for this workout." %}
            {% trans "Add training day" %}
            </a>
        </p>
    {% endif %}
{% endfor %}

{% if is_owner %}
<p>
    <a href="{% url 'manager:day:add' workout.id %}" class="wger-modal-dialog">{% trans "Add training day" %}</a>
    |
    <a id="exercise-comments-toggle" href="{% url 'core:user:preferences' %}">{% trans "Show/Hide exercise comments" %}</a>
</p>
{% endif %}
{% endblock %}



{#          #}
{# Side bar #}
{#          #}
{% block sidebar %}
<h4>{% trans "Steps" %}</h4>

<ol>
    <li>{% trans "Add training days" %}</li>
    <li>{% trans "Add workout sets to days" %}</li>
    <li>
        {% trans "Set the repetitions for each set" %}
        ({% trans "use '99' for 'all repetitions you can do'" %})
    </li>
</ol>


<h4>{% trans "Muscles trained" %}</h4>

<p>
    {% trans "Images show combined muscles as trained by the exercises on the workout." %}
</p>

<div class="row">
    <div class="col-md-6">
        <div id="muscle-front"
             class="muscle-background center-block"
             style="width: 120px; height: 220px; background-size: 120px; background-image: {% for background in muscle_backgrounds_front %}url({% static background %}){% if not forloop.last %},{% endif %}{% endfor %};">
        </div>
    </div>
    <div class="col-md-6">
        <div id="muscle-back"
                 class="muscle-background center-block"
                 style="width: 120px; height: 220px; background-size: 120px; background-image: {% for background in muscle_backgrounds_back %}url({% static background %}){% if not forloop.last %},{% endif %}{% endfor %};">
        </div>
    </div>
</div>


<h4>{% trans "Options" %}</h4>
<p>
    <img src="{% static 'images/icons/save.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Download as PDF' %}"
         title="{% trans 'Download as PDF' %}">
    {% trans "Download as PDF" %}:
    <a href="{% url 'manager:workout:pdf-log' workout.id uid token %}">{% trans "Log" %}</a>
    |
    <a href="{% url 'manager:workout:pdf-table' workout.id uid token %}">{% trans "Table" %}</a>
</p>

<p>
<a href="{% url 'manager:log:log' workout.id %}">
   <img src="{% static 'images/icons/statistics.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'View weight log' %}"
         title="{% trans 'View weight log' %}">
   {% trans "View weight log" %}
</a>
</p>

{% if is_owner %}
<p>
<a href="{% url 'manager:workout:edit' workout.id %}"
   class="wger-modal-dialog">
   <img src="{% static 'images/icons/edit.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Edit workout' %}"
         title="{% trans 'Edit workout' %}">
   {% trans "Edit workout" %}
</a>
</p>
{% endif %}

<p>
<a data-toggle="modal" data-target="#export-ical-popup">
   <img src="{% static 'images/icons/calendar.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Export calendar file' %}"
         title="{% trans 'Export calendar file' %}">
   {% trans "Export calendar file" %}
</a>
</p>

<p>
<a href="{% url 'manager:workout:copy' workout.id %}"
   class="wger-modal-dialog">
   <img src="{% static 'images/icons/copy.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Make a copy of this workout' %}"
         title="{% trans 'Make a copy of this workout' %}">
   {% trans "Make a copy of this workout" %}
</a>
</p>

{% if is_owner %}
<p>
<a href="{% url 'manager:workout:delete' workout.id %}"
   class="wger-modal-dialog">
    <img src="{% static 'images/icons/trash.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Delete this workout' %}">
    {% trans "Delete this workout" %}
</a>
</p>
{% endif %}

<div class="modal fade" id="export-ical-popup">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans "Export calendar file" %}</h4>
            </div>
            <div class="modal-body">
                <p>{% trans "Export this workout as a calendar file." %}</p>
                <p>{% blocktrans %}You can then import the file it into your calendar
application for example google calendar, outlook or iCal. This will create
an appointment for each training day with the appropriate exercises.{% endblocktrans %}</p>
                <p>
                <a href="{% url 'manager:workout:ical' workout.id uid token %}" class="btn btn-block btn-default">
                   <img src="{% static 'images/icons/calendar.svg' %}"
                         width="32"
                         height="32"
                         alt="{% trans 'Export calendar file' %}"
                         title="{% trans 'Export calendar file' %}">
                   {% trans "Export calendar file" %}
                </a>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}
