{% extends "orga/cfp/base.html" %}
{% load bootstrap4 %}
{% load compress %}
{% load formset_tags %}
{% load i18n %}
{% load static %}

{% block cfp_content %}
    {% compress js %}
        <script defer src="{% static "js/jquery.formset.js" %}"></script>
        <script defer src="{% static "cfp/js/animateFormset.js" %}"></script>
        <script defer src="{% static "vendored/moment-with-locales.js" %}"></script>
        <script defer src="{% static "vendored/moment-timezone-with-data-2012-2022.js" %}"></script>
        <script defer src="{% static "vendored/datetimepicker/bootstrap-datetimepicker.js" %}"></script>
        <script defer src="{% static "orga/js/datetimepicker.js" %}"></script>
        <script defer src="{% static "orga/js/questionRequiredField.js" %}"></script>
    {% endcompress %}
    <h2>
        {% if form.instance.question %}{% translate "Question" %}: {{ form.instance.question }}{% else %}{% translate "New question" %}{% endif %}
    </h2>
    <form method="post">
        {% csrf_token %}
        {% bootstrap_form_errors form %}
        {% 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 %}

        {% bootstrap_field form.target layout='event' %}
        {% bootstrap_field form.variant layout='event' %}
        {% bootstrap_field form.question layout='event' %}
        {% bootstrap_field form.help_text layout='event' %}
        <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>
        {% bootstrap_field form.question_required layout='event' %}
        {% bootstrap_field form.deadline layout='event' %}
        {% bootstrap_field form.freeze_after layout='event' %}
        {% bootstrap_field form.is_public layout='event' %}
        <span id="is-visible-to-reviewers">
            {% bootstrap_field form.is_visible_to_reviewers layout='event' %}
        </span>
        {% if form.tracks %}
            <span class="limit-submission">
                {% bootstrap_field form.tracks layout='event' %}
            </span>
        {% endif %}
        {% if form.submission_types %}
            <span class="limit-submission">
                {% bootstrap_field form.submission_types layout='event' %}
            </span>
        {% endif %}
        <span id="limit-length">
            {% bootstrap_field form.min_length layout='event' %}
            {% bootstrap_field form.max_length layout='event' %}
        </span>
        {% bootstrap_field form.contains_personal_data layout='event' %}

        <fieldset id="answer-options">
            <legend>{% translate "Answer options" %}</legend>
            <div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
                {{ formset.management_form }}
                {% bootstrap_formset_errors formset %}
                <div data-formset-body>
                    {% for form in formset %}
                        <div data-formset-form>
                            <div class="sr-only">
                                {{ form.id }}
                                {% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
                            </div>
                            <div class="question-option-row ml-auto col-md-9">
                                <div class="question-option-input{% if action == 'view' %} disabled{% endif %}">
                                    {% bootstrap_form_errors form %}
                                    {% bootstrap_field form.answer layout='inline' form_group_class="" %}
                                </div>
                                {% if action != 'view' %}
                                    <div class="question-option-delete">
                                        <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 }}
                        {% bootstrap_field formset.empty_form.DELETE form_group_class="" layout="inline" %}
                        </div>
                        <div class="question-option-row ml-auto col-md-9">
                        <div class="question-option-input">
                        {% bootstrap_field formset.empty_form.answer layout='inline' form_group_class="" %}
                        </div>
                        <div class="question-option-delete">
                        <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 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/submit_row.html" %}
    </form>
{% endblock %}
