{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% 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 wgerCustomModalInit()
{
    // Set up the edit set functions on modal dialogs
    wgerInitEditSet();
}


$(document).ready(function() {
  var $exercisecomments = $(".exercise-comments");
   /*
    * Show/Hide the comments to the exercises
    */
   {% if user.userprofile.show_comments %}
       $exercisecomments.show();
   {% else %}
       $exercisecomments.hide();
   {% endif %}
   wgerToggleComments();
});
</script>
{% endblock %}


{#         #}
{# Content #}
{#         #}
{% block content %}
{% if workout.comment %}
<p>
    <span class="text-muted">{{workout.comment}}</span>
</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 %}

    <div class="list-group">
        <a href="{% url 'manager:day:add' workout.id %}" class="list-group-item list-group-item-success wger-modal-dialog">
            {% trans "No days for this workout." %}<br>
            {% trans "Add training day." %}
        </a>
    </div>
{% endfor %}


<p style="margin-top:2em;">
    {% if is_owner %}
    <a href="{% url 'manager:day:add' workout.id %}" {% auto_link_css request.user_agent.is_mobile "wger-modal-dialog" %}>
        {% trans "Add training day" %}
    </a>

    <a id="exercise-comments-toggle"
       href="{% url 'core:user:preferences' %}"
       {% auto_link_css request.user_agent.is_mobile %}>
        {% trans "Show/Hide exercise comments" %}
    </a>
    {% endif %}
</p>
{% 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" %}</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-xs-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-xs-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>



<div class="modal fade" id="export-ical-link">
    <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 %}" {% auto_link_css request.user_agent.is_mobile %}>
                   {% trans "Export calendar file" %}
                </a>
                </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="download-pdf-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 "Download as PDF" %}</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div id="pdf-download-info" data-workout-id="{{ workout.id }}" data-uid="{{ uid }}" data-token="{{ token }}"></div>
                    <div class="form-group">
                        <div>
                            <label for="id_images" class="col-md-3 control-label">
                                {% trans "Type" %}
                            </label>
                        </div>
                        <div class="col-md-9" style="padding-left: 35px;">
                            <div class="radio">
                                <input type="radio" name="pdf_type" id="id_type_log" value="log" checked>
                                {% trans "Log" %}
                            </div>
                            <div class="radio">
                                <input type="radio" name="pdf_type" id="id_type_table" value="table">
                                {% trans "Table" %}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <label for="id_images" class="col-md-3 control-label">
                                {% trans "with images" %}
                            </label>
                        </div>
                        <div class="col-md-9">
                            <input type="checkbox" class="checkbox" name="images" id="id_images" checked>
                        </div>
                    </div>
                    <div class="form-group">
                        <div>
                            <label for="id_comments" class="col-md-3 control-label">
                                {% trans "with comments" %}
                            </label>
                        </div>
                        <div class="col-md-9">
                            <input type="checkbox" class="checkbox" name="comments" id="id_comments" checked>
                        </div>
                    </div>
                </form>

                <p>
                <a href="" class="btn btn-block btn-default" id="download-pdf-button">
                   {% trans "Download" %}
                </a>
                </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{#         #}
{# Options #}
{#         #}
{% block options %}
<div class="btn-group">
    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="{% fa_class 'cog' %}"></span>
        {% trans "Options" %}
    </button>
    <ul class="dropdown-menu">
        <li>
            <a data-toggle="modal" data-target="#download-pdf-popup">
                <span class="{% fa_class 'download' %}"></span>
                {% trans "Download as PDF" %}
            </a>
        </li>
        <li>
            <a href="{% url 'manager:log:log' workout.id %}">
               <span class="{% fa_class 'line-chart' %}"></span>
               {% trans "View weight log" %}
            </a>
        </li>
        {% if is_owner %}
        <li>
            <a href="{% url 'manager:workout:edit' workout.id %}" class="wger-modal-dialog">
               <span class="{% fa_class 'pencil-square-o' %}"></span>
               {% trans "Edit workout" %}
            </a>
        </li>
        {% endif %}
        <li>
            <a data-toggle="modal" data-target="#export-ical-popup">
               <span class="{% fa_class 'calendar' %}"></span>
               {% trans "Export calendar file" %}
            </a>
        </li>
        <li>
            <a href="{% url 'manager:workout:copy' workout.id %}" class="wger-modal-dialog">
               <span class="{% fa_class 'clone' %}"></span>
               {% trans "Make a copy of this workout" %}
            </a>
        </li>
        {% if is_owner %}
        <li role="separator" class="divider"></li>
        <li>
            <a href="{% url 'manager:workout:delete' workout.id %}" class="wger-modal-dialog">
                <span class="{% fa_class 'trash' %}"></span>
                {% trans "Delete this workout" %}
            </a>
        </li>
    </ul>
</div>
{% endif %}
{% endblock %}
