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

{% block title %}{{schedule.name}}{% endblock %}

{% block header %}
<script type="text/javascript">
function init_sortable()
{
    $("#schedule-table tbody").off();
    $("#schedule-table tbody").sortable({
        handle: '.dragndrop-handle',
        revert: true,
        update : function (event, ui) {
            var schedule_id = ui.item.data('scheduleId');

            // returns something in the form "step-1,step-2,step-3,"
            var order = $( this ).sortable('toArray');

            $.get('/' + get_current_language() + "/workout/schedule/api/" + schedule_id + "/edit" + "?do=set_order&order=" + order);
            current_url = $("#current-url").data('currentUrl');

            // TODO: again, why do we need to do this twice. Otherwise, sometimes
            //       it doesn't get current data
            $.get(current_url);
            $.get(current_url, function(data) {
                $('#schedule-table').html($(data).find('#schedule-table').html());
                init_sortable();
                form_modal_dialog();
            });
        }
    })
}

// Initialise the datepicker for the modal dialog
function custom_modal_init()
{
    init_schedule_datepicker();
}

$(function() {
    init_sortable();
    init_schedule_datepicker();
});

$(document).ready(function() {
    // Popup for exporting ical file
    $('#export-ical-link').click(function(e){
        e.preventDefault();
        $('#export-ical-popup').dialog({
            modal: true
        });
    });
 });
</script>
{% endblock %}

{% block content %}
<div id="schedule-table-container">
<table id="schedule-table">
    <thead>
    <tr>
        <th>{% trans "Nr." %}</th>
        <th>{% trans "Actions" %}</th>
        <th>{% trans "Workout" %}</th>
        <th>{% trans "Weeks" %}</th>
    </tr>
    </thead>
    <tbody>
    {% for step in schedule.schedulestep_set.select_related %}
    <tr data-schedule-id="{{schedule.id}}" id="step-{{step.id}}">
        <td>
            {{ forloop.counter }}
        </td>
        <td style="min-width: 6em;">
<!--             {{ forloop.counter }} -->

            <span class="editoptions">
                <img src="{% static 'images/icons/move.svg' %}"
                     width="22"
                     height="22"
                     alt="{% trans 'Move me' %}"
                     title="{% trans 'Move me' %}"
                     class="dragndrop-handle">
                 <a href="{% url 'step-edit' step.id %}"
                   title="{% trans 'Edit' %}"
                   class="modal-dialog">
                       <img src="{% static 'images/icons/edit.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Edit' %}">
                </a>
                 <a href="{% url 'step-delete' step.id %}"
                    title="{% trans 'Delete' %}"
                    class="modal-dialog">
                        <img src="{% static 'images/icons/trash.svg' %}"
                             width="22"
                             height="22"
                             alt="{% trans 'Delete' %}">
                </a>
            </span>
        </td>
        <td>
            <a href="{% url 'workout-view' step.workout.id %}">{{ step.workout }}</a>
            {% if active_workout == step %}
            <span class="label label-info">{% trans "active" %}</span>
            {% endif  %}
        </td>
        <td>
            {{ step.duration }}
        </td>
    </tr>
    {% empty %}
    <tr>
        <td colspan="4">
            <a href="{% url 'step-add' schedule.id %}" class="modal-dialog btn btn-block">
            {% trans "No workouts found." %} {% trans "Add one now." %}
            </a>
        </td>
    </tr>
    {% endfor %}
    {% if schedule.is_loop %}
    <tr>
        <td colspan="4">
            <div class="alert alert-info" style="margin-bottom:0px;">
            {% trans "This schedule is a loop and will go through the workouts above till you deactivate it" %}
            </div>
        </td>
    </tr>
    {% endif %}
    </tbody>
</table>
</div>

<p>
<a href="{% url 'step-add' schedule.id %}"
   class="modal-dialog">
<img src="{% static 'images/icons/new.svg' %}"
    width="32"
    height="32"
    alt="{% trans 'Add workout' %}"
    title="{% trans 'Add workout' %}">
{% trans "Add workout" %}</a>
</p>
{% endblock %}


{% block sidebar %}
<h3>{% trans "Adding workouts" %}</h3>

<p>{% blocktrans %}Add as many workouts to the schedule as you want. You can
edit the order per drag-and-drop. It's also possible to add one workout more
than once.{% endblocktrans %}</p>

<h3>{% trans "Options" %}</h3>
<p>
<a href="#" id="export-ical-link">
<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 'schedule-edit' schedule.id %}"
   class="modal-dialog">
<img src="{% static 'images/icons/edit.svg' %}"
    width="32"
    height="32"
    alt="{% trans 'Edit schedule' %}"
    title="{% trans 'Edit schedule' %}">
{% trans "Edit schedule" %}</a>
</p>

<p>
<a href="{% url 'schedule-delete' schedule.id %}"
   class="modal-dialog">
<img src="{% static 'images/icons/trash.svg' %}"
    width="32"
    height="32"
    alt="{% trans 'Delete schedule' %}"
    title="{% trans 'Delete schedule' %}">
{% trans "Delete schedule" %}</a>
</p>


<div id="export-ical-popup" style="display:none;">
    <div>
        <h3>{% trans "Export calendar file" %}</h3>
        <p>{% trans "Export this schedule 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 'schedule-ical' schedule.id %}" class="btn btn-block">
           <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>
{% endblock %}
