{% extends "base.html" %}
{% load url from future %}
{% 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();
});
</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 'wger.manager.views.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="{% 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>

{% endblock %}
