{% set value = (value is null ? field.default : value) %}
{% set siblings = data.parent.children.visible %}


<div class="form-field grid pure-g">
    <div class="form-label block size-1-3 pure-u-1-3">
        <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 block size-2-3 pure-u-2-3">
        <div class="form-order-wrapper {{ field.size }}">
            <input type="hidden" data-order name="{{ (scope ~ field.name)|fieldName }}" value="{{ value }}" />
            {% if data.parent.header.content.items %}
                <span class="note">Parent setting order, ordering disabled</span>
            {% elseif not data.visible %}
                <span class="note">Page is not visible, ordering disabled</span>
            {% endif %}

            {% if siblings|length < 200 %}
				<ul id="ordering" class="{{ field.classes }}">
			    {% for page in siblings %}
					<li class="{% if page.order  == value %}drag-handle{% else %}ignore{% endif %}" data-id="{{ page.slug }}">{{ page.title() }}</li>
                {% endfor %}
				</ul>
			{% else %}
                <span class="note">Ordering via the admin is unsupported because there are more than 200 siblings</span>
			{% endif %}
        </div>
    </div>
    <script>
        jQuery(function(){
            var el = jQuery('#ordering');
            new Sortable(el[0], {
                filter: ".ignore",
                onUpdate: function(evt){
                    var index = el.children().index(jQuery(evt.item)) + 1;
                    jQuery('[data-order]').val(index);
                }
                // draggable: ".drag-handle"
            });
        });
    </script>
</div>
