{% extends "pretixcontrol/items/base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% load formset_tags %}
{% load escapejson %}
{% block title %}
    {% if question %}
        {% blocktrans with name=question.question %}Question: {{ name }}{% endblocktrans %}
    {% else %}
        {% trans "Question" %}
    {% endif %}
{% endblock %}
{% block inside %}
    {% if question %}
        <h1>{% blocktrans with name=question.question %}Data field: {{ name }}{% endblocktrans %}</h1>
    {% else %}
        <h1>{% trans "Data field" %}</h1>
    {% endif %}
    <form action="" method="post" class="form-horizontal">
        {% csrf_token %}
        {% bootstrap_form_errors form %}
        {% bootstrap_field form.question layout="control" %}
        {% bootstrap_field form.type layout="control" %}
        <div id="valid-number">
            {% bootstrap_field form.valid_number_min layout="control" %}
            {% bootstrap_field form.valid_number_max layout="control" %}
        </div>
        <div id="valid-date">
            {% bootstrap_field form.valid_date_min layout="control" %}
            {% bootstrap_field form.valid_date_max layout="control" %}
        </div>
        <div id="valid-datetime">
            {% bootstrap_field form.valid_datetime_min layout="control" %}
            {% bootstrap_field form.valid_datetime_max layout="control" %}
        </div>
        <div id="valid-string">
            {% bootstrap_field form.valid_string_length_max layout="control" %}
        </div>
        <div id="valid-file">
            {% bootstrap_field form.valid_file_portrait layout="control" %}
        </div>
        <div id="answer-options">
            <h3>{% trans "Answer options" %}</h3>
            <noscript>
                <p>{% trans "Only applicable if you choose 'Choose one/multiple from a list' above." %}</p>
            </noscript>
            <div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}" data-formset-delete-confirm-text="{% trans "If you delete an answer option, you will no longer be able to see statistical data on customers who previously selected this option, and when such customers edit their answers, they need to select a different option." %}">
                {{ 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" %}
                                {% bootstrap_field form.ORDER form_group_class="" layout="inline" %}
                            </div>
                            <div class="row question-option-row">
                                <div class="col-xs-10">
                            <span class="text-muted">
                                {% blocktrans trimmed with id=form.instance.identifier %}
                                    Answer option {{ id }}
                                {% endblocktrans %}
                            </span>
                                    {% bootstrap_form_errors form %}
                                    {% bootstrap_field form.answer layout='inline' form_group_class="" %}
                                </div>
                                <div class="col-xs-2 text-right flip">
                                    <span>&nbsp;</span><br>
                                    <button type="button" class="btn btn-default" data-formset-move-up-button>
                                        <i class="fa fa-arrow-up"></i></button>
                                    <button type="button" class="btn btn-default" data-formset-move-down-button>
                                        <i class="fa fa-arrow-down"></i></button>
                                    <button type="button" class="btn btn-danger" data-formset-delete-button>
                                        <i class="fa fa-trash"></i></button>
                                </div>
                            </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" %}
                                {% bootstrap_field formset.empty_form.ORDER form_group_class="" layout="inline" %}
                            </div>
                            <div class="row question-option-row">
                                <div class="col-xs-10">
                            <span class="text-muted">
                                {% trans "New answer option" %}
                            </span>
                                    {% bootstrap_field formset.empty_form.answer layout='inline' form_group_class="" %}
                                </div>
                                <div class="col-xs-2 text-right flip">
                                    <span>&nbsp;</span><br>
                                    <button type="button" class="btn btn-default" data-formset-move-up-button>
                                        <i class="fa fa-arrow-up"></i></button>
                                    <button type="button" class="btn btn-default" data-formset-move-down-button>
                                        <i class="fa fa-arrow-down"></i></button>
                                    <button type="button" class="btn btn-danger" data-formset-delete-button>
                                        <i class="fa fa-trash"></i></button>
                                </div>
                            </div>
                        </div>
                    {% endescapescript %}
                </script>
                <p>
                    <button type="button" class="btn btn-default" data-formset-add>
                        <i class="fa fa-plus"></i> {% trans "Add a new option" %}</button>
                </p>
            </div>
        </div>
        {% bootstrap_field form.identifier layout="control" %}
        {% bootstrap_field form.ask_during_checkin layout="control" %}
        {% bootstrap_field form.show_during_checkin layout="control" %}
        {% bootstrap_field form.hidden layout="control" %}
        {% bootstrap_field form.print_on_invoice layout="control" %}


        <div class="form-group submit-group">
            <button type="submit" class="btn btn-primary btn-save">
                {% trans "Save" %}
            </button>
        </div>
    </form>
{% endblock %}