{% load i18n %}
{% load staticfiles wger_extras thumbnail %}

<script>
$(document).ready(function() {

    // Call the setup function to allow the sets to be sortable again after loading this
    // view via AJAX
    setup_sortable();

    // Init the modal dialog to edit the exercise
    form_modal_dialog();

})
</script>

<table class="table table-bordered workout-table" id="table-day-{{ day.obj.id }}">
<thead>
    <tr id="day-{{ day.obj.id }}">
        <th colspan="2" style="background: none repeat scroll 0% 0% #F5F5F5;">

            {{ day.days_of_week.text }} – {{ day.obj.description }}
            {% if editable %}
            <span class="editoptions" style="float: right;">
                <a href="{% url 'manager:day:delete' day.obj.id %}"
                   title="{% trans 'Delete' %}">
                       <img src="{% static 'images/icons/trash.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Delete' %}"></a>
                <a href="{% url 'manager:day:edit' day.obj.id %}"
                   title="{% trans 'Edit' %}"
                   class="wger-modal-dialog">
                       <img src="{% static 'images/icons/edit.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Edit' %}"></a>
                <a href="{% url 'manager:day:log' day.obj.id %}"
                   title="{% trans 'Add weight log to this day' %}">
                       <img src="{% static 'images/icons/statistics.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Add weight log to this day' %}"></a>
            </span>
            {% endif %}
        </th>
    </tr>
    </thead>
    <tbody>
        {% for set in day.set_list %}
        <tr id="set-{{ set.obj.id }}">
            <td style="width: 15%;border-right-width: 0px;">
                <h5><strong>{{ forloop.counter }}</strong></h5>

                {% if editable %}
                <span class="editoptions">
                {% if day.set_list|length > 1 %}
                <img src="{% static 'images/icons/move.svg' %}"
                     width="22"
                     height="22"
                     alt="{% trans 'Move me' %}"
                     title="{% trans 'Move me' %}"
                     class="dragndrop-handle">
                <br>
                {% endif %}
                <a href="{% url 'manager:set:edit' set.obj.id %}"
                   title="{% trans 'Edit' %}"
                   class="wger-modal-dialog">
                       <img src="{% static 'images/icons/edit.svg' %}"
                            width="22"
                            height="22"
                            alt="{% trans 'Edit' %}">
                </a>
                    <br>
                <a href="{% url 'manager:set:delete' set.obj.id %}"
                   title="{% trans 'Delete' %}">
                        <img src="{% static 'images/icons/trash.svg' %}"
                             width="16"
                             height="16"
                             alt="{% trans 'Delete' %}">
                </a>
                </span>
                {% endif %}
            </td>
            <td style="border-left-width: 0px;">
                <div class="exercise-list">
                {% for exercise in set.exercise_list %}
                <div id="exercise-{{ exercise.obj.id }}" class="ajax-set-edit-target">
                    <div class="media">


                        <div class="media-left">
                            <a href="{{exercise.obj.get_absolute_url}}" >
                            <div style="width: 64px; height: 64px;">
                            {% if exercise.obj.main_image %}
                            <img class="img-responsive"
                                 src="{{ exercise.obj.main_image.image|thumbnail_url:'small' }}"
                                 alt="{{exercise.obj}}"
                                 style="max-width: 100%; max-height: 100%;">
                            {% else %}
                            <img class="img-responsive"
                                 src="{% static 'images/icons/image-placeholder.svg' %}"
                                 alt="{% trans 'Placeholder image for exercise' %}"
                                 style="opacity: 0.4;">
                            {% endif %}
                            </div>
                            </a>
                        </div>



                        <div class="media-body">
                            <h4 class="media-heading">
                                {{ exercise.obj.name }}
                            </h4>
                            <p>{{exercise.setting_text}}</p>

                            {% if editable %}
                            {% if not exercise.setting_list %}
                            <p>
                                {% trans "This exercise has no repetitions." %}<br>
                                <a href="{% url 'manager:set:edit' set.obj.id %}" class="wger-modal-dialog">
                                {% trans "Edit them now."%}
                                </a>
                            </p>
                            {% endif %}

                            {% if exercise.comment_list %}
                            <p class="text-muted exercise-comments">
                                {% for comment in exercise.comment_list %}
                                    {{comment}}<br>
                                {% endfor %}
                            </p>
                            {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %} <!--for exercise in set-->
                </div>
            </td>
        </tr>
        {% empty %}
        {% if editable %}
        <tr>
            <td colspan="2">
                    <a href="{% url 'manager:set:add' day.obj.id %}"
                       class="wger-modal-dialog btn btn-default btn-block wger-modal-dialog">
                       {% trans "No exercises selected for this day." %}
                       {% trans "Add one now." %}
                    </a>
            </td>
        </tr>
        {% endif %}
        {% endfor %} <!--for set in day-->
        {% if editable %}
        <tr>
            <td colspan="2">
                <a href="{% url 'manager:set:add' day.obj.id %}"
                   class="wger-modal-dialog">{% trans "Add exercises to this workout day" %}</a>
            </td>
        </tr>
        {% endif %}
    </tbody>
</table>