<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 agenda-sort">
  <p translate>Drag and drop items to change the order of the agenda. Your modification will be saved immediately.</p>

  <p>
    <button class="btn btn-default btn-sm" ng-click="showInternalItems=!showInternalItems">
      <translate ng-if="showInternalItems">Hide internal items</translate>
      <translate ng-if="!showInternalItems">Show internal items</translate>
    </button>

  <div uib-alert ng-show="alert.show" ng-class="'alert-' + (alert.type || 'warning')" ng-click="alert={}" close="alert={}">
    {{ alert.msg }}
  </div>

  <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>
</div>


<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
  <div ui-tree-handle ng-if="!item.item.is_hidden">
    {{ item.item.getListViewTitle() }}
  </div>
  <div ui-tree-handle ng-if="item.item.is_hidden && showInternalItems" class="internal">
    <i class="fa fa-ban"></i> &nbsp;
    {{ item.item.getListViewTitle() }}
  </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>

