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

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

    <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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


{% endblock %}

{% block content %}

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


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

<ul id="questions" class="dragparent">
{% for question in quizrandom.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-random' question.id %}">delete</a>] 
    Question {{ question.display_number }}: 
    <a href="{% url 'edit-question-random' 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%">
{{ quizrandom.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 %}
