{% extends "orga/base.html" %}

{% load compress %}
{% load formset_tags %}
{% load i18n %}
{% load static %}

{% block extra_title %}{% if form.instance.question %}{{ form.instance.question }}{% else %}{% translate "New question" %}{% endif %} :: {% endblock extra_title %}

{% block stylesheets %}
    {% compress css %}
        <link rel="stylesheet" href="{% static "orga/css/dragsort.css" %}">
    {% endcompress %}
{% endblock stylesheets %}

{% block scripts %}
    {% compress js %}
        <script defer src="{% static "js/jquery.js" %}"></script>
        <script defer src="{% static "js/jquery.formset.js" %}"></script>
        <script defer src="{% static "cfp/js/animateFormset.js" %}"></script>
        <script defer src="{% static "orga/js/questionForm.js" %}"></script>
        <script defer src="{% static "orga/js/dragsort.js" %}"></script>
    {% endcompress %}
{% endblock scripts %}

{% block content %}
    <h2>
        {% if form.instance.question %}
            {% translate "Question" %}: {{ form.instance.question }}
        {% else %}
            {% translate "New question" %}
        {% endif %}
    </h2>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% include "common/forms/errors.html" %}
        {% if action == "edit" and question.answers.count %}
            <div class="alert alert-warning col-md-9 offset-md-3">
                {% blocktranslate trimmed %}
                    This question has already been answered by some speakers – please consider
                    carefully if modifying it would render those answers obsolete. You could also
                    deactivate this question and start a new one instead.
                {% endblocktranslate %}
            </div>
        {% endif %}

        {% if action != "create" %}
            {% if question.active %}
                <div class="alert alert-info col-md-9 offset-md-3">
                    <span>
                        {% translate "This question is currently active, it will be asked during submission." %}
                        <a class="btn btn-sm btn-outline-danger"
                           href="{{ question.urls.toggle }}">{% translate "Hide question" %}</a>
                    </span>
                </div>
            {% else %}
                <div class="alert alert-info col-md-9 offset-md-3">
                    <span>
                        {% translate "This question is currently inactive, and will not be asked during submission." %}
                        <a class="btn btn-sm btn-success" href="{{ question.urls.toggle }}">{% translate "Activate question" %}</a>
                    </span>
                </div>
            {% endif %}
        {% endif %}

        {{ form.target.as_field_group }}
        {{ form.variant.as_field_group }}
        {{ form.question.as_field_group }}
        {{ form.help_text.as_field_group }}
        <div class="alert alert-info col-md-9 offset-md-3" id="alert-required-boolean">
            {% blocktranslate trimmed %}
                If you mark a Yes/No question as required, it means that the user has to select Yes and No is not
                accepted. If you want to allow both options, do not make this field required.
            {% endblocktranslate %}
        </div>
        {{ form.is_public.as_field_group }}
        {{ form.contains_personal_data.as_field_group }}
        <span id="is-visible-to-reviewers">{{ form.is_visible_to_reviewers.as_field_group }}</span>
        <fieldset class="limit-submission">
            <legend>{% translate "Limit to specific proposals" %}</legend>
            {% if form.tracks %}
                <span class="limit-submission">{{ form.tracks.as_field_group }}</span>
            {% endif %}
            {% if form.submission_types %}
                <span class="limit-submission">{{ form.submission_types.as_field_group }}</span>
            {% endif %}
        </fieldset>
        <fieldset>
            <legend>{% translate "Input validation" %}</legend>
            {{ form.question_required.as_field_group }}
            {{ form.deadline.as_field_group }}
            {{ form.freeze_after.as_field_group }}
            <span id="limit-length">
                {{ form.min_length.as_field_group }}
                {{ form.max_length.as_field_group }}
            </span>
            <span id="limit-number">
                {{ form.min_number.as_field_group }}
                {{ form.max_number.as_field_group }}
            </span>
            <span id="limit-date">
                {{ form.min_date.as_field_group }}
                {{ form.max_date.as_field_group }}
            </span>
            <span id="limit-datetime">
                {{ form.min_datetime.as_field_group }}
                {{ form.max_datetime.as_field_group }}
            </span>
        </fieldset>

        <fieldset id="answer-options">
            <legend>{% translate "Answer options" %}</legend>
            <details class="col-md-9 offset-md-3 mb-3 hide-label" {% if form.errors.options or form.errors.options_replace %}open{% endif %}>
                <summary>{% translate "Upload answer options" %}</summary>
                <div class="pt-3"></div>
                {{ form.options.as_field_group }}
                {{ form.options_replace.as_field_group }}
                <hr>
            </details>
            <div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
                {{ formset.management_form }}
                {{ formset.non_form_errors }}
                <div data-formset-body dragsort-url="{{ form.instance.urls.base }}">
                    {% for form in formset %}
                        <div data-formset-form dragsort-id="{{ form.instance.id }}">
                            <div class="sr-only">
                                {{ form.id }}
                                {{ form.DELETE }}
                            </div>
                            <div class="question-option-row flip ml-auto col-md-9 mb-2 d-flex hide-label">
                                <div class="question-option-input w-100{% if action == "view" %} disabled{% endif %}">
                                    {% include "common/forms/errors.html" %}
                                    {{ form.answer.as_field_group }}
                                </div>
                                {% if action != "view" %}
                                    <div class="question-option-delete d-flex align-items-start">
                                        <button draggable="true" type="button" class="btn btn-primary ml-1 mr-1 dragsort-button" title="{% translate "Move item" %}">
                                            <i class="fa fa-arrows"></i>
                                        </button>

                                        <button type="button" class="btn btn-danger" data-formset-delete-button>
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <script type="form-template" data-formset-empty-form>
                    {% escapescript %}
                        <div data-formset-form>
                        <div class="sr-only">
                        {{ formset.empty_form.id }}
                        {{ formset.empty_form.DELETE }}
                        </div>
                        <div class="question-option-row flip ml-auto col-md-9 mb-2 d-flex hide-label">
                        <div class="question-option-input w-100">
                        {{ formset.empty_form.answer.as_field_group }}
                        </div>
                        <div class="question-option-delete ml-2">
                        <button type="button" class="btn btn-danger" data-formset-delete-button>
                        <i class="fa fa-trash"></i></button>
                        </div>
                        </div>
                        </div>
                    {% endescapescript %}
                </script>
                {% if action != "view" %}
                    <p class="col-md-9 flip ml-auto">
                        <button type="button" class="btn btn-info" data-formset-add>
                            <i class="fa fa-plus"></i> {% translate "Add a new option" %}
                        </button>
                    </p>
                {% endif %}
            </div>
        </fieldset>

        {% include "orga/includes/submit_row.html" %}

    </form>
{% endblock content %}
