{% extends 'base.html' %}

{% block js %}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
        type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
var saveOrder = function() {
    var url = "{% url 'reorder-fridge-categories' fridge.id %}?";
    var worktodo = 0;
    jQuery("#categories li").each(function(index,element) {
       worktodo = 1;
       var id = jQuery(element).attr('id').split("-")[1];
       url += "category_" + index + "=" + id + ";";
    });
    if (worktodo == 1) {
        var req = new XMLHttpRequest();
        req.open("POST",url,true);
        req.send(null);
    }
};

</script>

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

{% block content %}
<h2><a href="/edit{{fridge.pageblock.section.get_absolute_url}}">{{fridge.pageblock.section.label}}</a>: {{fridge.pageblock.label}}</h2>
<ul id="categories" class="dragparent">
{% for category in fridge.category_set.all %}
    <li class="draggable" id="category-{{category.id}}">
    <span title="drag to reorder pageblocks" class="draghandle ui-icon ui-icon-arrowthick-2-n-s"></span>[<a href="{% url 'delete-fridge-category' category.id %}">delete</a>] 
    Category {{ category.display_number }}: 
    <a href="{% url 'edit-fridge-category' category.id %}">{{category.label|truncatewords:5}}</a>
</li>

{% endfor %}
</ul>

<form action="{% url 'edit-fridge-add-category' fridge.id %}"
      method="post" enctype="multipart/form-data">
<h2>Add Category</h2>
<table width="100%">
{% csrf_token %}
{{ fridge.add_category_form.as_table}}
</table>
<input type="submit" value="add category" />
</form>

<script type="text/javascript">
jQuery(function() {
  jQuery("#categories").sortable({
    containment : 'parent'
    ,axis : 'y'
    ,tolerance: 'pointer'
    ,activeClass: 'dragging'
    ,handle: '.draghandle'
    ,stop: function (event,ui) { saveOrder();}
  });
  jQuery("#categories").disableSelection();
});
</script>

{% endblock %}

{% block sidenav %}
{% with "/edit" as menu_base %}
{% include "main/menu.html" %}
{% endwith %}
{% endblock %}
