{% extends 'base.html' %}
{% load bootstrap %}
{% load static from staticfiles %}

{% block css %}
<link rel="stylesheet"
      href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />

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

{% block js %}
    {% include "quizblock/include_jquery.html" %}
    <script src="{% static 'quizblock/js/quizblock-admin.js' %}"></script>
    <script>
        (function($) {
        var url = "{% url 'reorder-questions' quiz.id %}";
        $(document).ready(function() {
            $("#questions").sortable({
                containment : 'parent',
                axis : 'y',
                tolerance: 'pointer',
                activeClass: 'dragging',
                handle: '.draghandle',
                stop: function(event, ui) {
                    quizblock.saveOrder($('#questions li'), url, 'question_');
                }
            });
            $("#questions").disableSelection();
        });
        })(quizblock.$);
    </script>

{% endblock %}

{% block content %}

<ul class="breadcrumb">
    <li>
        <a href="{{quiz.pageblock.section.get_edit_url}}"
           >{{quiz.pageblock.section.label}}</a>
    </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">
    {% csrf_token %}
<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 %}
