{% set value = (value is null ? field.default : value) %}
{% set siblings = data.parent.children %}
{% set canOrder = data.order %}
{% set vertical = field.style == 'vertical' %}

<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
                {% 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 < 200 %}
                {% set sortable_count = 0 %}
				<ul id="ordering" 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>