<h1 translate>Sort agenda</h1>

<div id="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>

<p translate>Drag and drop items to change the order of the agenda. Your modification will be saved directly.</p>

<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
  <div ui-tree-handle>
    {{ (items | filter: {id: node.id})[0].item_number }}
    {{ (items | filter: {id: node.id})[0].title }}
  </div>
  <ol ui-tree-nodes="" ng-model="node.children">
    <li ng-repeat="node in node.children" ui-tree-node ng-include="'nodes_renderer.html'">
  </ol>
</script>

<div ui-tree callbacks="treeOptions">
  <ol ui-tree-nodes="" ng-model="tree" id="tree-root">
    <li ng-repeat="node in tree" ui-tree-node ng-include="'nodes_renderer.html'">
  </ol>
</div>
