<div class="header">
  <div class="title">
    <div class="submenu">
      <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
        <i class="fa fa-angle-double-left fa-lg"></i>
        <translate>Back to overview</translate>
      </a>
    </div>
    <h1 translate>Sort agenda</h1>
  </div>
</div>

<div class="details">
  <p class="lead" translate>Drag and drop items to change the order of the agenda. Your modification will be saved immediately.</p>

  <div ui-tree="treeOptions" id="tree-root">
    <ol ui-tree-nodes ng-model="items">
      <li ng-repeat="item in items" ui-tree-node ng-include="'nodes_renderer.html'">
    </ol>
  </div>
  <p class="spacer">* <translate>Internal item</translate</p>
</div>


<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
  <div ui-tree-handle>
    <span ng-if="item.item.is_hidden">*</span>
    {{ item.item.getTitle() }}
  </div>
  <ol ui-tree-nodes="" ng-model="item.children">
    <li ng-repeat="item in item.children" ui-tree-node ng-include="'nodes_renderer.html'">
  </ol>
</script>

