<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularJS UI Tree demo</title>

  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="dist/angular-ui-tree.min.css">
  <link rel="stylesheet" href="css/demo.css">
</head>
<body ng-app="treeApp">

  <div class="container" ng-controller="treeCtrl">
    <h1 class="page-header">Tree - demo</h1>
    <a href="index.html"><i class="glyphicon glyphicon-chevron-left"></i> Back to overview page</a>

    <div class="row">
      <div class="col-lg-6">
        <h3>Tree view
          <a href="" class="btn btn-default pull-right" ng-click="collapseAll()">Collapse all</a>
          <a href="" class="btn btn-default pull-right" ng-click="expandAll()">Expand all</a>
          <a href="" class="btn btn-default btn-warning pull-right" ng-click="moveLastToTheBegginig()">Move Last To The Begginig</a>

        </h3>

        <!-- Nested node template -->
        <script type="text/ng-template" id="nodes_renderer.html">
          <div ui-tree-handle class="tree-node tree-node-content">
            <a class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this)"><span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a>
            {{node.title}}
            <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a>
            <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a>
          </div>
          <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}">
            <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'">
            </li>
          </ol>
        </script>
        <div ui-tree id="tree-root">
          <ol ui-tree-nodes="" ng-model="data">
            <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'"></li>
          </ol>
        </div>
      </div>

      <div class="col-lg-6">
        <h3>Data binding</h3>
        <div class="info">
            {{info}}
        </div>
        <pre class="code">{{ data | json }}</pre>
      </div>
    </div>

  </div>

  <script src="bower_components/angular/angular.min.js"></script>
  <script type="text/javascript" src="dist/angular-ui-tree.js"></script>
  <script type="text/javascript" src="js/tree.js"></script>
</body>
</html>