{% extends 'base.html' %}
{% load bootstrap %}

{% block css %}
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" />

    <style type="text/css">
        .draghandle {float: left;}
        #questions {list-style-type: none; margin: 0; padding: 0;}
        #questions li { margin: 0 3px 3px 3px; padding: 0.4em;
        padding-left: 1.5em; 
              background-color: #ddd;
        }
        #questions li span { position: absolute; margin-left: -1.3em; }
        .dragging {border: #f60 solid 1px;}
    </style>
{% endblock %}

{% block js %}

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        var saveOrder = function() {
            var url = "{% url 'reorder-questions' quiz.id %}?";
            var worktodo = 0;
            jQuery("#questions li").each(function(index,element) {
               worktodo = 1;
               var id = jQuery(element).attr('id').split("-")[1];
               url += "question_" + index + "=" + id + ";";
            });
            if (worktodo == 1) {
                var req = new XMLHttpRequest();
                req.open("POST",url,true);
                req.send(null);
            }
        };
        
        jQuery(document).ready(function() {
            jQuery("#questions").sortable({
              containment : 'parent'
              ,axis : 'y'
              ,tolerance: 'pointer'
              ,activeClass: 'dragging'
              ,handle: '.draghandle'
              ,stop: function (event,ui) { saveOrder();}
            });
            jQuery("#questions").disableSelection();
          });

    </script>

{% endblock %}

{% block content %}

<ul class="breadcrumb">
	<li><a href="{{quiz.pageblock.section.get_edit_url}}">{{quiz.pageblock.section.label}}</a>
		<span class="divider">/</span>
	</li>
	<li>Edit Quiz</li>
</ul>


<h2>{{quiz.pageblock.label}}</h2>

<ul id="questions" class="dragparent">
{% for question in quiz.question_set.all %}
    <li class="draggable" id="question-{{question.id}}">
    <span title="drag to reorder pageblocks" class="draghandle ui-icon ui-icon-arrowthick-2-n-s"></span>[<a href="{% url 'delete-question' question.id %}">delete</a>] 
    Question {{ question.display_number }}: 
    <a href="{% url 'edit-question' question.id %}">{{question.text|truncatewords:5}}</a></li>
{% endfor %}
</ul>

<form action="add_question/" method="post" class="well form-horizontal">
<h2>Add Question</h2>
<table width="100%">
{{ quiz.add_question_form|bootstrap}}
</table>
<input type="submit" value="add question" class="btn btn-primary" />
</form>

{% endblock %}

{% block primarynavrightextra %}
    <li><a href="{{section.get_absolute_url}}">View</a></li>
{% endblock %}
