{% if config.plugins['admin-power-tools'].child_reordering_enabled %}
    
    {% set value = (value is null ? field.default : value) %}
    {% set siblings = data.children %}
    {% set canOrder = true %}
    {% set vertical = field.style == 'vertical' %}

    {#TODO refactor common code from order and order-child#}

    <div class="form-field grid pure-g{% if vertical %} vertical{% endif %}">
        <div class="form-label{% if not vertical %} block size-1-3 pure-u-1-3{% endif %}">
            <label>
                {% if field.help %}
                    <span class="tooltip" data-asTooltip-position="w"
                          title="{{ field.help|e|tu }}">{{ field.label|tu }}</span>
                {% else %}
                    {{ field.label|tu }}
                {% endif %}
                {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
            </label>
        </div>
        <div class="form-data{% if not vertical %} block size-2-3 pure-u-2-3{% endif %}">
            <div class="form-order-wrapper {{ field.size }}">
                <input
                        type="hidden"
                        data-order-child
                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
                        name="{{ (scope ~ field.name)|fieldName }}"
                        value=""/>
                {% if not canOrder %}
                    <div class="notice">{{ "PLUGIN_ADMIN.ORDERING_DISABLED_BECAUSE_PAGE_NO_PREFIX"|tu|raw }}</div>
                {% endif %}
                {% if siblings|length == 0 %}
                    <label>No Child Pages</label>
                {% elseif siblings|length < 200 %}
                    {% set sortable_count = 0 %}
                    <ul id="ordering-child" class="orderable {{ field.classes }}">
                        {% for page in siblings if page.order %}
                            <li class="drag-handle"
                                data-id="{{ page.slug }}" {{ page.slug == data.slug ? 'data-active-id' : '' }}><span
                                        class="page-order">{{ page.order }}</span> {{ page.title|e }} <a
                                        href="{{ getPageUrl(page) }}"><i class="fa fa-external-link"></i></a></li>
                            {% set sortable_count = loop.index %}
                        {% endfor %}
                    </ul>
                    {% if sortable_count < siblings|length %}
                        <label>{{ "PLUGIN_ADMIN.UNSORTABLE_PAGES"|tu }}</label>
                        <ul class="orderable disabled">
                            {% for page in siblings if not page.order %}
                                <li {{ page.slug == data.slug ? 'data-active-id' : '' }}>{{ page.title|e }} <a
                                            href="{{ getPageUrl(page) }}"><i class="fa fa-external-link"></i></a></li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                {% else %}
                    <div class="notice">{{ "PLUGIN_ADMIN.ORDERING_DISABLED_BECAUSE_TOO_MANY_SIBLINGS"|tu }}</div>
                {% endif %}
            </div>
        </div>
    </div>
{% endif %}