{% load static %}

<link type="text/css" rel="stylesheet" href="{% static "cmsnamedmenus/ext/jquery.nestable.min.css" %}"/>
<link type="text/css" rel="stylesheet" href="{% static "cmsnamedmenus/css/admin.min.css" %}" />

{% if not line.fields|length_is:'1' and not field.is_readonly %}
{{ field.errors }}
{% endif %}

{% if field.is_checkbox %}
    {{ field.field }}{{ field.label_tag }}
{% else %}
    {{ field.label_tag }}
    {% if field.is_readonly %}
        <p>{{ field.contents|linebreaksbr }}</p>
    {% else %}
        {{ field.field }}
    {% endif %}
{% endif %}
{% if field.field.help_text %}
    <p class="help">{{ field.field.help_text|safe }}</p>
{% endif %}

<section class="pages">

    <div class="selected">
        <h3>Selected Pages</h3>
        <aside class="menu-pages dd">
            {%if menu_pages %}
                <ol class="dd-list">
                    {% for page in menu_pages %}
                        {% include 'cms_named_menus/nestable_item.html' %}
                    {% endfor %}
                </ol>
            {% endif %}
        </aside>
    </div>

    <div class="available">
        <h3>Available Pages</h3>
        <div class="checkbox">
            <label><input id="include_child_items" type="checkbox">Include Child Items?</label>
        </div>
        <aside class="available-pages dd">
            <ol class="dd-list">
                {% for page in available_pages %}
                    {% include 'cms_named_menus/nestable_item.html' %}
                {% endfor %}
            </ol>
        </aside>
    </div>
</section>


<script src="{% static "cmsnamedmenus/ext/jquery-3.3.1.min.js" %}"></script>
<script src="{% static "cmsnamedmenus/ext/jquery-ui.min.js" %}"></script>
<script src="{% static "cmsnamedmenus/ext/jquery.nestable.min.js" %}"></script>

<script>

    var availablePages = {{ available_pages_json|safe }};

    // Output the new menu pages on change
    function get_data(l, e, p){
        var data;
        data = $('.menu-pages.dd').nestable('serialize');
        $('#id_pages').val(JSON.stringify(data));
    }

    // Rebuild the original list of available pages - as this shouldn't change
    function beforeDragStop(l, e, p){
        available_pages_options.json = availablePages;
        $('.available-pages.dd').nestable('destroy').nestable(available_pages_options);
    }

    // Remove child elements on click-drag - if set
    function onDragStart(l, e, p){
        if (!$('#include_child_items').is(":checked")) {
            if (e[0].children.length > 1) {
                for (i = 1; i < e[0].children.length; i++) {
                    e[0].children[i].remove();
                }
            }
        }
    }

    // Output the content for the available pages when they're rebuilt
    function contentCallback(item) {
        return item.content || '' ? item.content : '≡ ' + item.title;
    }

    // Standard options for each menu
    options = {
        scroll: true,
        group: 1,
        expandBtnHTML: '',
        collapseBtnHTML: '',
        callback: get_data,
        beforeDragStop: beforeDragStop,
    };

    // Options for selected menus
    menu_pages_options = $.extend({}, options);

    // Options for available pages
    available_pages_options = $.extend({}, options);
    available_pages_options.onDragStart = onDragStart;
    available_pages_options.contentCallback = contentCallback;

    // Build nestable menus
    $('.menu-pages.dd').nestable(menu_pages_options);
    $('.available-pages.dd').nestable(available_pages_options);

</script>