<md-toolbar color="primary">
  <md-toolbar-row>   
  </md-toolbar-row>
</md-toolbar>

<div  fxLayout="row"  fxLayoutWrap="wrap"  fxLayoutAlign="center start">
  <div fxFlex.gt-md="30" fxFlex.gt-sm="100" fxFlex="100">
    <md-card class="md-card-top">
      <md-card-content>
        <form class="mb-1">
          <md-input placeholder="Filter nodes" #filter (keyup)="filterNodes(filter.value, tree)" style="width: 100%"></md-input>
        </form>

        <Tree
          #tree
          [nodes]="nodes"
          [focused]="true"
          [options]="customTemplateStringOptions">
          <template #treeNodeTemplate let-node>
            <span title="{{node.data.subTitle}}">{{ node.data.name }}</span>
            <span class="pull-right">{{ childrenCount(node) }}</span>
          </template>
          <template #loadingTemplate>Loading, please hold....</template>
        </Tree>
      </md-card-content>
    </md-card>
  </div>

  <div fxFlex.gt-md="50" fxFlex.gt-sm="100" fxFlex="100" class="pl-1 pr-1">
    <h6>Keys:</h6>
    <p>down | up | left | right | space | enter</p>
    
    <h6>Mouse:</h6>
    <p>click to select | shift+click to select multi</p>
    
    <h6>API:</h6>
    <button md-raised-button md-button-sm (click)="tree.treeModel.focusNextNode()">next node</button>
    <button md-raised-button md-button-sm (click)="tree.treeModel.focusPreviousNode()">previous node</button>
    <button md-raised-button md-button-sm (click)="tree.treeModel.focusDrillDown()">drill down</button>
    <button md-raised-button md-button-sm (click)="tree.treeModel.focusDrillUp()">drill up</button>
    <button md-raised-button md-button-sm (click)="customTemplateStringOptions.allowDrag = true">allowDrag</button>
    <p></p>
    <button md-raised-button md-button-sm 
      [disabled]="!tree.treeModel.getFocusedNode()"
      (click)="tree.treeModel.getFocusedNode().toggleActivated()">
      {{ tree.treeModel.getFocusedNode()?.isActive ? 'deactivate' : 'activate' }}
    </button>
    <button md-raised-button md-button-sm 
      [disabled]="!tree.treeModel.getFocusedNode()"
      (click)="tree.treeModel.getFocusedNode().toggleExpanded()">
      {{ tree.treeModel.getFocusedNode()?.isExpanded ? 'collapse' : 'expand' }}
    </button>
    <button md-raised-button md-button-sm 
      [disabled]="!tree.treeModel.getFocusedNode()"
      (click)="tree.treeModel.getFocusedNode().blur()">
      blur
    </button>
    <button md-raised-button md-button-sm 
      (click)="addNode(tree)">
      Add Node
    </button>
    <button md-raised-button md-button-sm
      (click)="activateSubSub(tree)">
      Activate inner node
    </button>
  </div>
</div>