{% extends "forms/field.html.twig" %}

{% set value = (value is null ? field.default : value) %}
{% if form %}
    {% set siblings = form.object.parent.children.collection %}
    {% set canOrder = form.object.order %}
    {% if not form.object.exists %}
        {% do siblings.add(form.object) %}
    {% endif %}
{% else %}
    {% do admin.enablePages() %}
    {% set siblings = context.parent.children %}
    {% set canOrder = context.order %}
{% endif %}
{% set vertical = field.style == 'vertical' %}

{% block field %}
<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|t }}">{{ field.label|t }}</span>
            {% else %}
            {{ field.label|t }}
            {% 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"|t|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|int }}.</span> {{ page.title ?: 'NEW' }} <a href="{{ getPageUrl(page) }}"><i class="fa fa-external-link"></i></a></li>
                    {% set sortable_count = loop.index %}
                    {% endif %}
                {% endfor %}
                </ul>
                {% if sortable_count < siblings|length %}
                <label>{{ "PLUGIN_ADMIN.UNSORTABLE_PAGES"|t }}</label>
                <ul class="orderable disabled">
                    {% for page in siblings %}
                        {% if not page.order %}
                        <li {{ page.slug == data.slug ? 'data-active-id' : ''}}>{{ page.title ?: 'NEW' }} <a href="{{ getPageUrl(page) }}"><i class="fa fa-external-link"></i></a></li>
                        {% endif %}
                    {% endfor %}
                </ul>
                {% endif %}
            {% else %}
                <div class="notice">{{ "PLUGIN_ADMIN.ORDERING_DISABLED_BECAUSE_TOO_MANY_SIBLINGS"|t }}</div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}