{% 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 %}
		{% if "success" in request.GET %}
			<div class="alert alert-success">
				{% trans "Your changes have been saved." %}
			</div>
		{% endif %}
		<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>
        <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 %}