{% extends 'zebrafinch/base.html' %}
{% load url from future %}

{% block page_js %}
<script>
window.addEvent('domready', function(){
	//have to use document.id() instead of $() due to jquery conflict
	var sectionList = document.id('section_list');
	var sort = new Sortables(sectionList);
	document.id('section_order').set('value',sort.serialize());

	sort.addEvent('complete', function(){
		document.id('section_order').set('value',this.serialize());
	});

});
</script>
{% endblock page_js %}

{% block content %}
<a href='{% url 'zf_reorder_main' %}'>Back to series list</a>
<form action = '{% url 'zf_reorder_series' slug=section_list.0.series.slug  %}' method="post">{% csrf_token %}
	<input type="submit" name="submit" value="update" />
	<input type="submit" name="auto_reorder" value="auto_reorder" />
	<input type="submit" name="reset order" value="reset_order" />
	<ul id='section_list' >
	{% for section in section_list %}
		<li id="{{ section.pk }}">
		<img class="brainthumb" src='{{ STATIC_URL }}{{ section.thumbnail }}' />[Old order: {{ section.display_order }}, Index: {{ section.index }}]<br />jp2: {{ section.jp2_file_name}}
		</li>
	{% endfor %}
	</ul>
	<input name="section_order" id="section_order" type="hidden" value="uninitialised" />
	<input type="submit" name="submit" value="update" />
	<input type="submit" name="auto_reorder" value="auto_reorder" />
	<input type="submit" name="reset order" value="reset_order" />
</form>
{% endblock content %}