<div class="form-group">
  <div ng-repeat="filter in agg.params.filters">
    <div class="visEditorAggHeader">
      <label class="visEditorAggHeader__title visEditorAggHeader__title--grow" for="visEditorFilterInput{{agg.id}}">
          Filter {{$index + 1}}
          <span ng-if="filter.label">- {{ filter.label }}</span>
      </label>

      <div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
        <button
          ng-click="showConfig = !showConfig"
          type="button"
          aria-label="Toggle filter label"
          aria-expanded="{{!!showConfig}}"
          aria-controls="visEditorFilterLabel{{agg.id}}"
          class="kuiButton kuiButton--basic kuiButton--small">
          <i class="fa fa-tag"></i>
        </button>
        <button
          type="button"
          aria-label="Remove this filter"
          ng-click="agg.params.filters.splice($index, 1)"
          class="kuiButton kuiButton--danger kuiButton--small">
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>

    <div class="form-group">
      <input
        data-test-subj="visEditorFilterInput_{{agg.id}}_{{$index}}"
        id="visEditorFilterInput{{agg.id}}"
        parse-query
        ng-model="filter.input.query"
        type="text"
        class="form-control"
        name="filter{{$index}}">
    </div>

    <div class="form-group" ng-show="showConfig" id="visEditorFilterLabel{{agg.id}}">
      <label for="visEditorFilterLabelInput{{agg.id}}">Filter {{$index + 1}} label</label>
      <input
        id="visEditorFilterLabelInput{{agg.id}}"
        ng-model="filter.label"
        placeholder="Label"
        type="text"
        class="form-control"
        name="label{{$index}}">
    </div>
  </div>
</div>

<input ng-model="agg.params.filters.length" name="filterLength" required min="1" type="number" class="ng-hide" />
<div class="hintbox" ng-show="aggForm.filterLength.$invalid">
  <p>
    <i class="fa fa-danger text-danger"></i>
    <strong>Required:</strong> You must specify at least one filter.
  </p>
</div>

<button
  data-test-subj="visEditorAddFilterButton"
  click-focus="'filter'+(agg.params.filters.length-1)"
  ng-click="agg.params.filters.push({input:{}})"
  class="kuiButton kuiButton--primary kuiButton--fullWidth"
>
  Add Filter
</button>

<div class="euiSpacer euiSpacer--s"></div>
