{% extends 'base.html' %}
{% load i18n %}
{% load mptt_tags %}

{% block title %}{% trans "Edit menu" %}{% endblock %}

{% block main %}
<h1>{{ root.name }}<span title="{% trans "Add root node" %}" id="new_item_{{ root.id }}" class="new_item"></span></h1>
<ol class="nested_sortable">
    {% recursetree menu %}
        <li id="item_{{ node.id }}">
            <div>{{ node.name }}
                <span title="{% trans "Delete node" %}" id="delete_item_{{ node.id }}" class="delete_item"></span>
                <span title="{% trans "Add child to node" %}" id="new_item_{{ node.id }}" class="new_item"></span>
            </div>
            {% if not node.is_leaf_node %}
                <ol>
                    {{ children }}
                </ol>
            {% endif %}
        </li>
    {% endrecursetree %}
</ol>
<form action="" method="post" class="uniForm">
    <fieldset>
        {% csrf_token %}
        <input type="hidden" name="mptt_tree" value="{}" id="mptt_tree" />
    </fieldset>
    <button type="submit" name="submit" class="primaryAction" id="submit_menu">
        {% trans "Save" %}
    </button>
</form>
{% endblock main %}

{% block sidebar %}
    <div id="new_menu_item"></div>
    <h1>{% trans "Menu editing" %}</h1>
    <p>{% trans "Reorder by dragging and dropping up and down, left and right. If the elements are indented, they will belong to a submenu. You can create a large structure doing this, but the best is to keep it simple. The plus and minus is used to create or delete elements. Use the topmost plus to add elements to the main menu." %}</p>

{% endblock %}

{% block footer_include %}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="/static/js/jquery.ui.nestedSortable.js"></script>
<script src="/static/js/json2.js"></script>
{% endblock footer_include %}

{% block footer_js %}
    $('ol.nested_sortable').nestedSortable({
        disableNesting: 'no-nest',
    	forcePlaceholderSize: true,
    	handle: 'div',
    	helper:	'clone',
    	items: 'li',
    	opacity: 0.6,
    	placeholder: 'placeholder',
    	tabSize: 25,
    	tolerance: 'pointer',
    	toleranceElement: '> div',
    });

    $('#submit_menu').click(function(){
        var tree = $('ol.nested_sortable').nestedSortable('toArray', {startDepthCount: 0});
        tree = JSON.stringify(tree);
    	$('#mptt_tree').val(tree);
    });

    // add onclick to delete-item-buttons
    $("span.delete_item").each(function(index){
        $(this).click(function(){
           var id = $(this).attr('id').split('_');
           id = id[2];
           $.ajax({
               url: '{% url menu-delete %}',
               type: 'POST',
               data: 'node_id='+id,
               success: function(data){
                   location.reload();
               }
           });
        });
    });

    // add onclick to new-item-buttons
    $("span.new_item").each(function(index){
        $(this).click(function(){
            var id = $(this).attr('id').split('_');
            id = id[2];

            $.ajax({
                url: '{% url menu-new %}',
                type: 'GET',
                data: 'parent_id='+id,
                success: function(data){
                    $("#new_menu_item").html(data);
                }
            });
        });
    });
{% endblock footer_js %}
