{% load i18n %}
<h2 class="navigation-title">{% trans "Categories" %}</h2>
<div class="navigation-body manage-categories-portlet">
    <ol class="manage-categories-tree sortable">
        {% for category in categories %}
            <li id="category_{{ category.id }}">
                <div>
                    <a class="selectable {% if category.is_current %}selected{% endif %}"
                       href="{% url lfs_manage_category category.id %}">
                        <img class="handle" src="{{ STATIC_URL }}img/handle.png" alt="Handle" />
                        {{ category.name }}
                    </a>
                 </div>
                 {{ category.children }}

            </li>
        {% endfor %}
    </ol>
</div>

<script>
    $(function() {
        $('ol.sortable').nestedSortable({
            placeholder: 'placeholder',
            forcePlaceholderSize: true,
            handle: '.handle',
            helper: 'clone',
            items: 'li',
            opacity: .6,
            placeholder: 'placeholder',
            revert: 250,
            tabSize: 25,
            tolerance: 'pointer',
            toleranceElement: '> div',
            stop: function(event, ui){
                serialized = $('ol.sortable').nestedSortable('serialize');
                $.ajax({
                  url: "{% url lfs-sort-categories %}",
                  context: document.body,
                  type: "POST",
                  data: {"categories": serialized},
               });
            }
        });
    });
</script>