{% extends 'baseModal.html' %}
{% include 'uiMacros.html' %}

{% block modalClass %}
  apos-reorganize-page
{% endblock%}

{% block modalControls %} 
  {{ renderProgressBtn({dataAttrs: 'data-cancel', float: 'right', color: 'base', label: 'Finished'}) }}
{% endblock %}

{% block modalLabel %}
  {{ __('Reorganize Pages') }}
{% endblock %}

{% block modalInstructions %}
  <p>
    {{ __('Drag and drop pages wherever they need to go.') }}
  </p>
{% endblock %}

{% block modalBody %}
  <div class="apos-modal-tab apos-active" data-tab-id="reorganize" >
    <div class="apos-modal-tab-content">
      {# This gets fired up by jstree #}
      <div class="apos-reorganize-tree" data-tree>
      </div>
      <div class="apos-reorganize-progress">
        {% include "progress.html" %}
      </div>
    </div>
  </div>
{% endblock %}