{% extends "base.html" %}

{% load i18n template_tools widget_tweaks %}

{% block head %}
    {{ block.super }}

    {% 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>
{% endblock %}

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

{% block actions %}
    <a class="btn btn-default" href="{{ evaluation.get_absolute_url }}">{% trans 'Back to the evaluation' %}</a>
{% endblock %}

{% block main %}
	<form action="{% if exercise.pk %}{{ evaluation.get_exercise_edit_url }}{% else %}{{ evaluation.get_exercise_create_url }}{% endif %}" method="POST" enctype="multipart/form-data">{% csrf_token %}
        {{ criteria_formset.management_form }}
		<div class="panel panel-default">
            <div class="panel-body">
                {% 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 %}
                                <span class="form-group {% if criterion_form.description.errors %}has-error{% endif %}">
                                    {% render_field criterion_form.description class+='form-control' style="width:950px" placeholder=criterion_form.description.label autocomplete="off" %}
                                </span>
                                {% render_field criterion_form.criterion_type class+='form-control' style="width:100px" %}
                                {% 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="panel-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>
		</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');
        });
    </script>
{% endblock %}