{% extends "base.html" %}

{% comment %}This view is used to create or edit a ``mtp.apps.surveys.Question`` instance.

Context
-------
pool : instance of ``mtp.apps.surveys.models.Pool``
    The pool for which we display the questions.
question : instance of ``mtp.apps.surveys.models.Question``
    The question to edit or create.
form : instance of ``django.forms.models.ModelForm``
    The form to created/edit the question (pre-filled if it's an edition).
choices_formset : instance of ``mtp.apps.surveys.forms.ChoicesFormSet``
    The editable list of choices for the current question.


Notes
-----
If ``question.pk`` is "falsy", then we assume that's it's new question to be created, else it's an
existing question to update.

{% endcomment %}

{% load i18n template_tools %}

{% block body_class %}{{ block.super }} page-cms-surveys page-cms-surveys-questions{% endblock %}

{% block head %}
    {{ block.super }}
    {% include "cms/includes/orderable-inline-head.html" %}

    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}surveys/css/question_form.css" />
    <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>
    <script type="text/javascript" src="{{ STATIC_URL }}surveys/js/question_form.js"></script>

    <script type="text/javascript">
    $(document).ready(function() {

        /**
         * Contains all available types of questions.
         * Keys are question type and values are lists of allowed value types.
         *
         * @type {Object.<string, Array[string]>}
         * @const
         */
        var ALLOWED_VALUE_TYPES = {{ allowed_value_types|safe }};

        /**
         * Allows to tell if a question type expects choices.
         * Keys are question type and values are booleans with `true` if choices expected.
         *
         * @type {Object.<string, boolean>}
         * @const
         */
        var CHOICES_EXPECTED = {{ choices_expected|safe }};

        /**
         * Allows to tell if global satisfaction is allowed for (question type, value type)
         * Keys are question type and values are lists of value types accepting global
         * satisfaction/
         *
         * @type {Object.<string, Array[string]>}
         * @const
         */
        var ALLOWED_GLOBAL_SATISFACTION = {{ allowed_global_satisfaction|safe }};

        surveysManager.handleQuestionForm(
            '{{ choices_formset.prefix }}',
            {
                addText: "{% trans 'Add another choice' %}",
                deleteText: "{% trans 'Delete this choice' %}"
            },
            ALLOWED_VALUE_TYPES,
            CHOICES_EXPECTED,
            ALLOWED_GLOBAL_SATISFACTION
        );

    });
    </script>
{% endblock %}

{% block subtitle %}
    {% if question.pk %}
        {% blocktrans trimmed with pool_name=pool.name question_title=question.title %}
            Edit the question "{{ question_title }}" of the pool "{{ pool_name }}"
        {% endblocktrans %}
    {% else %}
        {% blocktrans trimmed with pool_name=pool.name %}
            Add a question in the pool "{{ pool_name }}"
        {% endblocktrans %}
    {% endif %}
{% endblock %}

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

{% block main %}
    {% if form.errors or choices_formset.errors %}
        <div class="alert alert-danger">
            {% trans 'Please correct errors below.' %}
            {% if form.non_field_errors %}
                {{ form.non_field_errors }}
            {% endif %}
        </div>
    {% endif %}

    {% reducespaces %}
    <form id="survey-question-form"
          action="{% if question.pk %}{{ question.get_edit_url }}{% else %}{{ pool.get_question_create_url }}{% endif %}"
          method="post"
          enctype="multipart/form-data">
        {% endreducespaces %}{% csrf_token %}
        {{ form.media }}
        {{ choices_formset.management_form }}
        <table class="table table-hover" id="survey-question-form-main">
            <tbody>

                {% for field in form.hidden_fields %}
                    {{ field }}
                {% endfor %}

                {% for field in form.visible_fields %}
                    <tr>
                        <td>
                            {{ field.label_tag }}
                        </td>
                        <td>
                            {% if field.errors %}<div class="alert alert-danger">{{ field.errors }}</div>{% endif %}
                            {{ field }}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <div id="survey-question-form-choices" class="orderable-inline">
            <h3>{% trans 'Choices' %}</h3>

            {% if choices_formset.non_field_errors %}
                <div class="alert alert-danger">
                    {{ choices_formset.non_field_errors }}
                </div>
            {% endif %}

            <div class="alert alert-info">
                <ul>
                    <li>
                        {% blocktrans trimmed count min=view.model.MIN_CHOICES with max=view.model.MAX_CHOICES %}
                            You must enter at least 1 choice, at max {{ max }}.
                        {% plural %}
                            You must enter at least {{ min }} choices, at max {{ max }}.
                        {% endblocktrans %}
                    </li>
                </ul>
            </div>

            {% for choice_form in choices_formset %}
                {% reducespaces %}
                <div class="
                        orderable-entry
                        inline-choice
                        {% if forloop.last %}empty-form last-related{% endif %}"
                     id="{{ choices_formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
                {% endreducespaces %}
                <h4>
                    <span class="inline_label">
                        {% blocktrans trimmed with choice_number=forloop.counter %}
                            Choice #{{ choice_number }}
                        {% endblocktrans %}
                    </span>
                    {% if choice_form.instance and choice_form.instance.pk %}
                        <span class="delete">{{ choice_form.DELETE.label }} {{ choice_form.DELETE }}</span>
                    {% endif %}
                </h4>
                <table class="table table-hover cms-surveys-choice">
                    <tbody>
                    {% for field in choice_form.hidden_fields %}
                        {{ field }}
                    {% endfor %}
                    {% for field in choice_form.visible_fields %}{% if field.name != 'DELETE' %}
                        <tr>
                            <td>
                                {{ field.label_tag }}
                            </td>
                            <td>
                                {% if field.errors %}<div class="alert alert-danger">{{ field.errors }}</div>{% endif %}
                                {{ field }}
                            </td>
                        </tr>
                    {% endif %}{% endfor %}
                    </tbody>
                </table>
                </div>
            {% endfor %}

         </div>

        <div class="well">
            {% if question.pk %}
                <input class="btn btn-primary" type="submit" value="{% trans 'Save' %}" />
                <a class="btn btn-danger" href="{{ question.get_delete_url }}" title="{% trans 'You will have to confirm on the next page.' %}">{% trans 'Delete this question' %}</a>
            {% else %}
                <input class="btn btn-primary" type="submit" value="{% trans 'Create' %}" />
            {% endif %}
        </div>

    </form>
{% endblock %}