{% extends "pretixcontrol/items/base.html" %}
{% load i18n %}
{% load bootstrap3 %}
{% block title %}{% trans "Question" %}{% endblock %}
{% block inside %}
    <h1>{% trans "Question" %}</h1>
    <form action="" method="post" class="form-horizontal">
        {% csrf_token %}
        <fieldset>
            <legend>{% trans "General information" %}</legend>
            {% bootstrap_field form.question layout="horizontal" %}
            {% bootstrap_field form.type layout="horizontal" %}
            {% bootstrap_field form.required layout="horizontal" %}
        </fieldset>
        <fieldset>
            <legend>{% trans "Apply to products" %}</legend>
            {% bootstrap_field form.items layout="horizontal" %}
        </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 submit-group">
            <button type="submit" class="btn btn-primary btn-save">
                {% trans "Save" %}
            </button>
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            function alert_required_boolean() {
                var show = $("#id_type").val() == "B" && $("#id_required").prop("checked");
                $(".alert-required-boolean").toggle(show);
            }

            $("#id_type").change(alert_required_boolean);
            $("#id_required").change(alert_required_boolean);
            alert_required_boolean();
        });
    </script>
{% endblock %}