{% extends "orga/cfp/base.html" %}
{% load bootstrap4 %}
{% load formset_tags %}
{% load i18n %}
{% load staticfiles %}
{% block cfp_content %}

    <script type="text/javascript" src="{% static "js/jquery.formset.js" %}"></script>

    <form method="post" action="">
        {% csrf_token %}
        {% if action == "edit" and question.answers.count %}
            <div class="alert alert-warning">
                {% blocktrans 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.
                {% endblocktrans %}
            </div>
        {% endif %}

        {% if action != 'create' %}
          {% if question.active %}
            <div class="alert alert-info">
              {% trans "This question is currently active, it will be asked during submission." %}
              <a class="btn btn-xs btn-secondary" href="{{ question.urls.toggle }}">{% trans "Hide question" %}</a>
            </div>
          {% else %}
            <div class="alert alert-info">
              {% trans "This question is currently inactive, and will not be asked during submission." %}
              <a class="btn btn-xs btn-secondary" href="{{ question.urls.toggle }}">{% trans "Activate question" %}</a>
            </div>
          {% endif %}
        {% endif %}

        {% bootstrap_field form.target layout='event' %}
        {% bootstrap_field form.question layout='event' %}
        {% bootstrap_field form.variant layout='event' %}
        {% bootstrap_field form.help_text layout='event' %}
        {% bootstrap_field form.required layout='event' %}
        {% bootstrap_field form.contains_personal_data layout='event' %}

        <fieldset id="answer-options">
            <legend>{% trans "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> {% trans "Add a new option" %}</button>
                </p>
                {% endif %}
            </div>
                <script>jQuery(function($) {
                    $(".formset").formset({
                        animateForms: true
                    });
                    });</script>
        </fieldset>
        <div class="alert alert-info alert-required-boolean">
            {% blocktrans 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.
            {% endblocktrans %}
        </div>

        <div class="form-group row">
            <div class="ml-auto col-md-9">
                {% if action == "create" %}
                    <button type="submit" class="btn btn-primary">{% trans "Create question" %}</button>
                {% elif action == "edit" %}
                    <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
                {% elif action == "view" %}
                    <a class="btn btn-primary" href={{ question.urls.edit }}>{% trans "Edit" %}</a>
                {% endif %}
            </div>
        </div>
    </form>

{% endblock %}
