<h1 translate>Administration - Audit Universe</h1>

<div><input type="checkbox" ng-model="onlyActive"> <span translate>Show only active nodes</span></div>

<script type="text/ng-template"  id="tree_item_renderer.html">
  <span ng-if="!data.showDetails">
    <i class="fa fa-bars icon-as-button" title="{{ 'Drag and drop to re-position element in tree' | translate }}" ui-tree-handle ng-show="data.parent !== null"></i> <i class="fa fa-chevron-right icon-as-button" title="{{ 'Show details and sub-items' | translate }}" ng-click="toggleDetails(data)"></i> <span ng-class="{ 'admin-tree-element-title': true, 'admin-tree-element-inactive': !isActive(data) }">{{data.title}}</span>
  </span>

  <div class="tree-details" ng-if="data.showDetails">
    <i class="fa fa-bars icon-as-button" title="{{ 'Drag and drop to re-position element in tree' | translate }}" ui-tree-handle></i> <i class="fa fa-chevron-down icon-as-button" title="{{ 'Hide details and sub-items' | translate }}" ng-click="toggleDetails(data)"></i> <input type="text" ng-class="{ 'admin-tree-element-title': true, 'admin-tree-element-inactive': !isActive(data) }" ng-model="data.title" size="80" required> <i class="fa fa-trash icon-as-button" title="{{ 'Remove new tree element' | translate }}" ng-show="data.isNew" ng-click="deleteNode(data)"></i><br>

    <label>
      <input type="checkbox" ng-model="data.hasDashboard">
      <span translate>Enable ORA dashboard</span>
    </label><br>
  
    <div ng-show="data.parent !== null">
      <span translate>Active from:</span>
        <div class="dropdown form-group">
          <a class="dropdown-toggle" id="dropdown_valid_from_{{data.dataKey}}" role="button" data-toggle="dropdown">
            <div class="input-group"><input type="text" datetime-formatted class="form-control" data-ng-model="data.valid_from" ng-change="updateValidTo(data)"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span></div>
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <datetimepicker data-ng-model="data.valid_from" data-datetimepicker-config="{ dropdownSelector: '#dropdown_valid_from_' + data.dataKey }"/>
          </ul>
       </div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span translate>Active to:</span>
        <div class="dropdown form-group">
          <a class="dropdown-toggle" id="dropdown_valid_to_{{data.dataKey}}" role="button" data-toggle="dropdown">
            <div class="input-group"><input type="text" datetime-formatted class="form-control" data-ng-model="data.valid_to_editor" ng-change="updateValidTo(data)"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span></div>
          </a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <datetimepicker data-ng-model="data.valid_to_editor" data-on-set-time="updateValidTo(data)" data-datetimepicker-config="{ dropdownSelector: '#dropdown_valid_to_' + data.dataKey }"/>
          </ul>
       </div>
    </div>

    <ul ui-tree-nodes="" ng-model="data.nodes">
      <li ng-repeat="data in data.nodes | filter:filterActive" ui-tree-node ng-include="'tree_item_renderer.html'"></li>
      <li ng-click="newNode(data)"><i class="fa fa-plus admin-new-link" aria-hidden="true"></i> <span class="admin-new-link" translate>New sub-item for {{data.title}}</span></li>
    </ul>
  </div>

</script>

<div class="error-message" ng-show="errMessage" >{{errMessage | translate}}</div>

<div class="loadingIndicator" ng-show="isLoading" translate>
  Loading Audit Universe...
</div>

<form name="treeForm">

  <div ui-tree="treeOptions" ng-show="!isLoading && !errMessage" class="vertical-margins">
    <ul ui-tree-nodes="" data-nodrop-enabled="true" ng-model="tree">
      <li ng-repeat="data in tree | filter:filterActive" ui-tree-node ng-include="'tree_item_renderer.html'"></li>
    </ul>
  </div>

  <div>
    <button ng-click="saveChanges()" ng-disabled="treeForm.$pristine || !treeForm.$valid || !hasAccess || isLoading || isProcessing || errMessage" translate>Save changes to Audit Universe</button>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button ng-click="cancelChanges()" ng-disabled="treeForm.$pristine || isLoading || isProcessing" translate>Cancel changes</button>
  </div>

</form>
