<div class="filter-bar-confirm" ng-show="newFilters.length">
  <form ng-submit="applyFilters(newFilters)">
  <ul class="list-unstyled">
    <li>Apply these filters?</li>
    <li ng-repeat="filter in newFilters" class="filter" ng-click="filter.meta.apply = !filter.meta.apply"><input type="checkbox" ng-checked="filter.meta.apply"/> {{ filter.meta.key }}: {{ filter.meta.value }}</li>
    <li ng-if="changeTimeFilter" class="changeTimeFilter filter" ng-click="changeTimeFilter.meta.apply = !changeTimeFilter.meta.apply"><input type="checkbox" ng-checked="changeTimeFilter.meta.apply"/> <strong>Change time to:</strong> {{changeTimeFilter.meta.value}} </li>
    <li><button class="btn btn-xs btn-primary">Apply Now</button> or <a ng-click="clearFilterBar();">Cancel</a></li>
  </ul>
  </form>
</div>

<div class="filter-bar" ng-show="filters.length">
  <div class="filter" ng-class="{ negate: filter.meta.negate, disabled: filter.meta.disabled }" ng-repeat="filter in filters">
    <div class="filter-description">
      <span ng-if="filter.$state.store == 'globalState'"><i class="fa fa-fw fa-thumb-tack pinned"></i></span>
      <span ng-if="filter.meta.alias">{{ filter.meta.alias }}</span>
      <span ng-if="!filter.meta.alias">{{ filter.meta.key }}:</span>
      <span ng-if="!filter.meta.alias">"{{ filter.meta.value }}"</span>
    </div>
    <div class="filter-actions">
      <a class="action filter-toggle" ng-click="toggleFilter(filter)" data-test-subj="disableFilter-{{ filter.meta.key }}">
        <i ng-show="filter.meta.disabled" class="fa fa-fw fa-square-o disabled"></i>
        <i ng-hide="filter.meta.disabled" class="fa fa-fw fa-check-square-o enabled"></i>
      </a>
      <a class="action filter-pin" ng-click="pinFilter(filter)" data-test-subj="pinFilter-{{ filter.meta.key }}">
        <i ng-show="filter.$state.store == 'globalState'" class="fa fa-fw fa-thumb-tack pinned"></i>
        <i ng-hide="filter.$state.store == 'globalState'" class="fa fa-fw fa-thumb-tack fa-rotate-270 unpinned"></i>
      </a>
      <a class="action filter-invert" ng-click="invertFilter(filter)" data-test-subj="invertFilter-{{ filter.meta.key }}">
        <i ng-show="filter.meta.negate" class="fa fa-fw fa-search-plus negative"></i>
        <i ng-hide="filter.meta.negate" class="fa fa-fw fa-search-minus positive"></i>
      </a>
      <a class="action filter-remove" ng-click="removeFilter(filter)">
        <i class="fa fa-fw fa-trash" data-test-subj="removeFilter-{{ filter.meta.key }}"></i>
      </a>
      <a class="action filter-edit" ng-click="startEditingFilter(filter)">
        <i class="fa fa-fw fa-edit"></i>
      </a>
    </div>
  </div>

  <div class="filter-edit-container" ng-if="editingFilter">
    <form role="form" name="editFilterForm" ng-submit="editDone()">
      <div class="form-group filter-edit-alias">
        <label>Filter Alias
          <small>(optional)</small>
        </label>
        <input
          ng-model="editingFilter.alias"
          type="text"
          class="form-control">
      </div>
      <div
        json-input
        require-keys="true"
        ui-ace="{
          mode: 'json',
          onLoad: aceLoaded
        }"
        ng-model="editingFilter.model"></div>
      <div class="form-group">
        <button class="btn btn-primary" ng-click="stopEditingFilter()">Cancel</button>
        <button type="submit" class="btn btn-success"
          ng-disabled="editFilterForm.$invalid"
          >Done</button>
        <small ng-show="editFilterForm.$invalid">Could not parse JSON input</small>
      </div>
    </form>
  </div>

  <div class="filter-link">
    <div class="filter-description small">
      <a ng-click="showFilterActions = !showFilterActions">
        Actions
        <i class="fa"
        ng-class="{'fa-caret-down': showFilterActions, 'fa-caret-right': !showFilterActions}" data-test-subj="showFilterActions"></i>
      </a>
    </div>
  </div>
</div>

<div class="filter-bar filter-bar-condensed" ng-show="filters.length && showFilterActions">
  <div class="filter-actions-all">
    <div class="filter-link">
      <div class="filter-description"><strong>All filters:</strong></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="toggleAll(false)">Enable</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="toggleAll(true)">Disable</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="pinAll(true)">Pin</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="pinAll(false)">Unpin</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="invertAll()">Invert</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="toggleAll()">Toggle</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="removeAll()" data-test-subj="removeAllFilters">Remove</a></div>
    </div>
  </div>
</div>
