<div class="page page-tree" ng-controller="AbnTestController">


  <div class="tbox tbox-sm">


    <div class="tcol w-lg b-r bg-default lter">
      <div class="p-20">

        <button ng-click="try_changing_the_tree_data()" class="btn btn-default btn-block">Change The Tree Definition</button>
        <button ng-click="try_async_load()" class="btn btn-default btn-block">Load Tree Data Asynchronously</button>

        <hr class="b-0 b-b"/>

        <h5>Test the Tree Control API:</h5>

        <button ng-click="my_tree.select_first_branch()" class="btn btn-default btn-sm mb-10">First Branch</button>
        <br>
        <button ng-click="my_tree.select_next_sibling()" class="btn btn-default btn-sm mb-10">Next Sibling</button>
        <button ng-click="my_tree.select_prev_sibling()" class="btn btn-default btn-sm mb-10">Prev Sibling</button>
        <br>
        <button ng-click="my_tree.select_next_branch()" class="btn btn-default btn-sm mb-10">Next Branch</button>
        <button ng-click="my_tree.select_prev_branch()" class="btn btn-default btn-sm mb-10">Prev Branch</button>
        <br>
        <button ng-click="my_tree.select_parent_branch()" class="btn btn-default btn-sm mb-10">Parent</button>

        <hr class="b-0 b-b"/>

        <button ng-click="my_tree.expand_branch()" class="btn btn-default btn-sm mb-10">Expand</button>
        <button ng-click="my_tree.collapse_branch()" class="btn btn-default btn-sm mb-10">Collapse</button><br/>
        <button ng-click="my_tree.expand_all()" class="btn btn-default btn-sm mb-10">Expand All</button>
        <button ng-click="my_tree.collapse_all()" class="btn btn-default btn-sm mb-10">Collapse All</button>

        <hr class="b-0 b-b"/>
        <button ng-click="try_adding_a_branch()" class="btn btn-greensea btn-sm">Add Branch</button>

      </div>
    </div>

    <div class="tcol">
      <div class="p-20">
        <span ng-if="doing_async">...loading...</span>
        <div class="b-a bg-default lter">
          <abn-tree tree-data="my_data" tree-control="my_tree" on-select="my_tree_handler(branch)" expand-level="2" initial-selection="Granny Smith" icon-leaf="fa fa-file-o" icon-expand="fa fa-plus" icon-collapse="fa fa-minus"></abn-tree>
        </div>
      </div>
    </div>

    <div class="tcol">
      <div class="p-20">
        <div class="alert alert-info">{{ output }}</div>
      </div>
    </div>

  </div>


</div>

