{% extends 'modal_base.html' %}
{% load i18n %}

{% block title %}
	{% if object.pk %}
	    {% trans 'Edit details' %}
    {% else %}
        {% trans 'New quiz' %}
    {% endif %}
{% endblock %}

{% block body %}
	<form action="{% if object.pk %}{{ workshop.get_edit_url }}{% else %}{% url 'trainings:workshop-create' training_uuid=training.id %}{% endif %}"
		  method="post" id="workshop-form">{% csrf_token %}
		<div class="modal-body">
			{% include 'extras/form.html' with display='block' %}
		</div>
		<div class="modal-footer clearfix">
			<button type="button" class="btn btn-default pull-left" data-dismiss="modal">{% trans 'Cancel' %}</button>
			<input class="btn btn-danger pull-right" type="submit" value="{% trans 'Confirm' %}" />
		</div>
	</form>
	<script type="text/javascript">
        $(document).ready(function() {
            var isAssessingId = '#id_is_assessing',
                isBroadcastableId = '#id_is_broadcastable',
                withScoreId = '#id_enable_score';

            var $isAssessing = $(isAssessingId),
                $isBroadcastable = $(isBroadcastableId),
                $withScore = $(withScoreId);

            var $assessingOptions = $('#id_is_steps_order_random,#id_are_questions_mandatory,#id_is_questions_answers_order_random');

            var showOrHideAssessingOptions = function(show) {
                // Show or hide the assessing options of the quiz
                $assessingOptions.each(function(index, elem) {
                    var $checkbox = $(elem);
                    var $checkboxWrapper = $checkbox.closest('.checkbox');
                    $checkboxWrapper.toggle(show);
                    $checkboxWrapper.next('.help-block').toggle(show);
                    if (!show) {
                        $checkbox.prop('checked', false);
                    }
                });
            };

            var disableOrEnableFields = function() {
                // Disable or enable the fields accordingly to the options of the quiz
                var assessingIsChecked = $isAssessing.is(':checked'),
                    nonAssessingOptionsAreChecked = $isBroadcastable.is(':checked') || $withScore.is(':checked');

                $isBroadcastable.prop('disabled', assessingIsChecked);
                $withScore.prop('disabled', assessingIsChecked);
                showOrHideAssessingOptions(assessingIsChecked);

                $isAssessing.prop('disabled', nonAssessingOptionsAreChecked);
                $isAssessing.prop('disabled', nonAssessingOptionsAreChecked);
            };

            $(isAssessingId + ',' + isBroadcastableId + ',' + withScoreId).change(disableOrEnableFields);
            disableOrEnableFields();
        });
        $('#workshop-form').autoAjaxForm();
    </script>
{% endblock %}
