{% extends "modal_base.html" %}

{% load i18n template_tools widget_tweaks %}

{% block title %}
    {% if object.pk %}
	    {% trans 'Edit exercise' %}
    {% else %}
        {% trans 'New exercise' %}
    {% endif %}
{% endblock %}

{% block body %}
    {% include "cms/includes/orderable-inline-head.html" %}
    <script type="text/javascript">
        // `inlines.js` expects a `django` object with a `jQuery` key.
        window.django = {jQuery: $};
    </script>
    <script type="text/javascript" src="{{ STATIC_URL }}common/js/inlines.js"></script>
	<form action="{% if exercise.pk %}{{ exercise.get_edit_url }}{% else %}{{ evaluation.get_exercise_create_url }}{% endif %}" method="POST" enctype="multipart/form-data" id="exercise-form">{% csrf_token %}
        <div class="modal-body">
            {{ criteria_formset.management_form }}
            {% if form.errors or criteria_formset.errors %}
                <div class="alert alert-danger">
                    {% trans 'Please correct errors below.' %}
                    {% if form.non_field_errors %}
                        {{ form.non_field_errors }}
                    {% endif %}
                </div>
            {% endif %}
            {% include 'cms/extras/form.html' with display='block' %}
            <h4>{% trans 'Criteria' %}</h4>
            {% if criteria_formset.non_field_errors %}
                <div class="alert alert-danger">
                    {{ criteria_formset.non_field_errors }}
                </div>
            {% endif %}
            <div class="evaluation-exercise-criteria orderable-inline">
                {% for criterion_form in criteria_formset %}
                    {% reducespaces %}
                    <div class="
                        orderable-entry
                        inline-choice
                        form-inline
                        {% if forloop.last %}empty-form last-related{% endif %}"
                         id="{{ criteria_formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
                        {% endreducespaces %}
                        <div class="criterion-item">
                            <span class="inline_label"></span>
                            {% for field in criterion_form.hidden_fields %}
                                {{ field }}
                            {% endfor %}
                            {% render_field criterion_form.criterion_type class+='form-control' style="width:20%" %}
                            <span class="form-group {% if criterion_form.description.errors %}has-error{% endif %}" style="width:70%">
                                {% render_field criterion_form.description class+='form-control' style="width:100%" placeholder=criterion_form.description.label autocomplete="off" %}
                            </span>
                            {% if criterion_form.instance and criterion_form.instance.pk %}
                                <span class="delete btn btn-sm btn-danger">
                                    {{ criterion_form.DELETE.label }} {{ criterion_form.DELETE }}
                                </span>
                            {% endif %}
                            {% for field in answer_form.visible_fields %}
                                {% if field.name != 'DELETE' %}
                                    {% if field.errors %}
                                        <div class="alert alert-danger">
                                            {{ field.label }}: {{ field.errors }}
                                        </div>
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="modal-footer clearfix">
            <a class="btn btn-default pull-left" href="{{ evaluation.get_detail_url }}">{% trans 'Cancel' %}</a>
            <div class="pull-right">
                <input class="btn btn-primary" type="submit" value="{% trans 'Confirm' %}" />
                {% if not object.pk %}
                    <input class="btn btn-primary" type="submit" value="{% trans 'Confirm and add a new exercise' %}" name="_addanother"/>
                {% endif %}
            </div>
        </div>
	</form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.inline-choice').stackedFormset({
                prefix: '{{ criteria_formset.prefix }}',
                softDeletion: true,  // Handles the deletion of existing choices, and dynamical created ones the same way.
                addCssClass: 'add-row', // To make the "Add another criterion" link looks like a button.
                addText: '{% trans 'New criterion' %}', // Text of the "Add another criterion" button.
                deleteText: "<i class='fa fa-remove'></i>"
            });
            // Manually add the classes to transform the "Add another criterion" into a button
            $('.add-row').children('a').addClass('btn btn btn-primary');
            $('#exercise-form').ajaxForm({
                beforeSubmit:function() {
                    $('input[type="submit"], button').attr('disabled', 'disabled');
                },
                success: function(htmlResponse){
                    var $htmlResponse = $(htmlResponse);

                    if ($htmlResponse.closest('#exercise-form').length) {
                        $('#dialog-box-modal .modal-content').html($htmlResponse);
                        $('input[type="submit"], button').attr('disabled', false);
                    } else {
                        $('body').html($htmlResponse);
                        $('.dropdown-toggle').dropdown();
                    }
                }
            });
        });
    </script>
{% endblock %}
