<!-- header -->
<div class="visEditorAggHeader">

  <!-- open/close editor -->
  <button
    aria-label="Toggle {{agg.schema.title}} editor"
    ng-click="editorOpen = !editorOpen"
    aria-expanded="{{ !!editorOpen }}"
    aria-controls="visAggEditorParams{{agg.id}}"
    type="button"
    data-test-subj="toggleEditor"
    class="visEditorAggHeader__toggle kuiButton kuiButton--primary kuiButton--small">
    <i aria-hidden="true" ng-class="{ 'fa-caret-down': editorOpen, 'fa-caret-right': !editorOpen }" class="fa"></i>
  </button>

  <!-- title -->
  <span class="visEditorAggHeader__title" ng-class="{'visEditorAggHeader__title--grow': editorOpen}">
    {{ agg.schema.title }}
  </span>

  <!-- description -->
  <span ng-if="!editorOpen && aggForm.$valid" class="visEditorAggHeader__description" title="{{describe()}}">
    {{ describe() }}
  </span>

  <!-- error -->
  <span ng-if="!editorOpen && aggForm.$invalid" class="visEditorAggHeader__description visEditorAggHeader__description--danger" title="{{aggForm.describeErrors()}}">
    {{ aggForm.describeErrors() }}
  </span>

  <!-- controls !!!actually disabling buttons will break tooltips¡¡¡ -->
  <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
    <!-- disable aggregation -->
    <button
      ng-if="agg.enabled && canRemove(agg)"
      ng-click="agg.enabled = false"
      aria-label="Disable aggregation"
      tooltip="Disable aggregation"
      tooltip-append-to-body="true"
      data-test-subj="disableAggregationBtn"
      type="button"
      class="kuiButton kuiButton--basic kuiButton--small">
      <i aria-hidden="true" class="fa fa-toggle-on"></i>
    </button>

    <!-- enable aggregation -->
    <button
      ng-if="!agg.enabled"
      ng-click="agg.enabled = true"
      aria-label="Enable aggregation"
      tooltip="Enable aggregation"
      tooltip-append-to-body="true"
      data-test-subj="disableAggregationBtn"
      type="button"
      class="kuiButton kuiButton--basic kuiButton--small">
      <i aria-hidden="true" class="fa fa-toggle-off"></i>
    </button>

    <!-- drag handle -->
    <button
      draggable-handle
      ng-if="stats.count > 1"
      tooltip="Modify Priority by Dragging"
      tooltip-append-to-body="true"
      type="button"
      keyboard-move="onPriorityReorder(direction)"
      class="kuiButton kuiButton--basic kuiButton--small">
      <i aria-hidden="true" class="fa fa-arrows-v"></i>
      <span class="kuiScreenReaderOnly">
        Use up and down key on this button to move this aggregation up and down
        in the priority order.
      </span>
    </button>

    <!-- remove button -->
    <button
      ng-if="canRemove(agg)"
      aria-label="Remove Dimension"
      ng-if="stats.count > stats.min"
      ng-click="remove(agg)"
      tooltip="Remove Dimension"
      tooltip-append-to-body="true"
      type="button"
      class="kuiButton kuiButton--danger kuiButton--small">
      <i aria-hidden="true" class="fa fa-times"></i>
    </button>

  </div>

</div>

<vis-editor-agg-params
  id="visAggEditorParams{{agg.id}}"
  agg="agg"
  group-name="groupName"
  ng-show="editorOpen"
  index-pattern="vis.indexPattern">
</vis-editor-agg-params>

<vis-editor-agg-add
  ng-if="$index + 1 === stats.count"
  ng-hide="dragging">
</vis-editor-agg-add>
