{% extends "wagtailadmin/base.html" %}
{% load i18n wagtailadmin_tags compress %}
{% block titletag %}{% blocktrans with title=parent_page.title %}Exploring {{ title }}{% endblocktrans %}{% endblock %}
{% block bodyclass %}menu-explorer page-explorer {% if ordering == 'ord' %}reordering{% endif %}{% endblock %}

{% block content %}
    <header class="merged no-border nice-padding no-v-padding">
        <h1 class="visuallyhidden">Explorer</h1>

        {% include "wagtailadmin/shared/breadcrumb.html" with page=parent_page %}
    </header>
   
    <form id="page-reorder-form">
        {% csrf_token %}

        {% page_permissions parent_page as parent_page_perms %}
        {% include "wagtailadmin/pages/list.html" with sortable=1 allow_navigation=1 full_width=1 parent_page=parent_page orderable=parent_page_perms.can_reorder_children %} 
    </form>
{% endblock %}

{% block extra_js %}
    {% comment %} modal-workflow is required by the view restrictions interface {% endcomment %}
    <script src="{{ STATIC_URL }}wagtailadmin/js/modal-workflow.js"></script>
    <script src="{{ STATIC_URL }}wagtailadmin/js/privacy-indicator.js"></script>

    <script type="text/javascript">
        {% if ordering == 'ord' %}
            $(function() {
                var reorderCount = 0;
                var orderform = $('#page-reorder-form');

                $('.listing tbody').sortable({
                    cursor: "move", 
                    containment: "parent", 
                    handle: ".handle", 
                    items: "> tr",
                    axis: "y",
                    placeholder: "dropzone",
                    start: function(){
                        $(this).parent().addClass('sorting');
                    },
                    stop: function(event, ui){
                        $(this).parent().removeClass('sorting');

                        // Work out what page moved and where it moved to
                        var movedElement = ui.item[0];
                        var movedPageId = movedElement.id.substring(5);
                        var newPosition = $(movedElement).prevAll().length;

                        // If position is last element, don't set position variable
                        if ($(movedElement).nextAll().length == 0) {
                            newPosition = null;
                        }

                        // Build url
                        // TODO: Find better way to inject movedPageId
                        var url = "{% url 'wagtailadmin_pages_set_page_position' '999999' %}".replace('999999', movedPageId);
                        if (newPosition != null) {
                            url += '?position=' + newPosition;
                        }

                        // Get CSRF token
                        var CSRFToken = $('input[name="csrfmiddlewaretoken"]', orderform).val();

                        // Post
                        $.post(url, {csrfmiddlewaretoken: CSRFToken}, function(){
                            addMessage('success', '"' + $(movedElement).data('page-title') + '" has been moved successfully.')
                        })
                    }
                });
                $('.listing tbody').disableSelection();
            })
        {% endif %}
    </script>
{% endblock %}
