
<div ng-show="parentData.treeData" ng-controller="TreeController" class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  <div class="row" style="padding-bottom:15px">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-4" style="width:80px">
      <label class="control-label" for="context-query" style="padding: 8px 0">Sort by: </label>
    </div>
    <div>
      <div class="btn-group bootstrap-select">
        <button ark-select type="button" class="btn btn-default ark-dropdown-toggle selectpicker" ng-model="parentData.sortType"
          ark-options="option for option in ['Time Started', 'Time Completed']" placeholder="Time Started">
        </button>
      </div>
      <div class="btn-group bootstrap-select">
        <button ark-select type="button" class="btn btn-default ark-dropdown-toggle selectpicker" ng-model="parentData.sortOrder"
          ark-options="option for option in ['Earliest First', 'Latest First']" placeholder="Latest First">
        </button>
      </div>
    </div>
  </div>
  <div class="row">
    <dropdown-filter tree-model="parentData.treeData" set-selection="selectNode" delete-callback="parentData.delete"></dropdown-filter>
  </div>
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left:30px">
  <div class="btn-group dropdown-group">
      <button type="button" class="btn btn-default btn-dropdown ark-dropdown-toggle" ng-model="selectedItem" data-toggle="dropdown">New<span class="icon-dropdown-arrow"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li ng-click="selectedItem = 'Task'" ng-show="parentData.taskAddable"><a href>Task</a></li>
        <li ng-show="parentData.stateAddable" class="dropdown-submenu">
            State<span class="icon-chevron-right" ></span>
            <ul class="dropdown-menu">
              <li ng-repeat="att in parentData.stateAttributes" ng-click="parentData.selectedItem = 'State';parentData.entityType = att.name"><a href>{{att.label}}</a></li>
            </ul>
        </li>
        <li class="dropdown-submenu">
          Service<span class="icon-chevron-right" ></span>
          <ul class="dropdown-menu">
            <li ng-repeat="att in parentData.serviceAttributes" ng-click="parentData.selectedItem = 'Service';parentData.entityType = att.name"><a href>{{att.label}}</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="btn-group dropdown-group" ng-if="!parentData.completed && parentData.node">
  <div class="btn btn-default btn-dropdown ark-dropdown-toggle" ng-click="parentData.selectedItem = 'Complete'">Complete</div>
  </div>
  <div class="tab-body">
    <div ng-if="selectedItem === 'Task'" class="form-container">
      <h3>New Task</h3>
      <div ng-controller="TaskController">
        <createitem></createitem>
      </div>
    </div>
    <div ng-if="parentData.selectedItem === 'State' && parentData.entityType"  class="form-container">
    <h3>New State - {{parentData.entityType}}</h3>
      <div ng-controller="StateController">
        <createitem></createitem>
      </div>
    </div>
    <div ng-if="parentData.selectedItem === 'Service' && parentData.entityType" class="form-container">
    <h3>New Service - {{parentData.entityType}}</h3>
      <div ng-controller="ServiceController">
        <createitem></createitem>
      </div>
    </div>
      <div ng-if="parentData.selectedItem === 'Complete' && !parentData.completed"class="form-container">
        <form class="form-horizontal" role="form" ng-controller="CompleteController">
          <div class="form-group">
            <propertylist></propertylist>
          </div>
          <div class="form-group" style="margin-left:15px; margin-bottom:0px">
            <button type="button" class="btn btn-default" ng-click="complete()">Complete {{tabData.node.type}}</button>
          </div>
        </form>
      </div>
  </div>
</div>
