<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 track by $index" 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>
      <div class="kuiButtonGroup">
        <button class="kuiButton kuiButton--primary kuiButton--small">
          Apply Now
        </button>

        <button
          class="kuiButton kuiButton--hollow"
          ng-click="clearFilterBar();"
        >
          Cancel
        </button>
      </div>
    </li>
  </ul>
  </form>
</div>

<div
  class="filter-bar"
  ng-show="filters.length || showAddFilterButton()"
>
  <div
    class="filter"
    ng-class="{ negate: filter.meta.negate, disabled: filter.meta.disabled }"
    ng-repeat="filter in filters track by $index"
    data-test-subj="filter filter-{{ filter.meta.disabled ? 'disabled' : 'enabled' }} {{ filter.meta.key ? 'filter-key-' + filter.meta.key : '' }} {{ filter.meta.value ? 'filter-value-' + filter.meta.value : '' }}"
  >
    <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="deleteFilter(filter)">
        <i class="fa fa-fw fa-trash" data-test-subj="removeFilter-{{ filter.meta.key }}"></i>
      </a>
      <a class="action filter-edit" ng-click="editFilter(filter)">
        <i class="fa fa-fw fa-edit"></i>
      </a>
    </div>
  </div>

  <div
    class="filter-link"
    ng-show="showAddFilterButton()"
  >
    <div class="filter-description small">
      <a
        ng-click="addFilter()"
        kbn-accessible-click
      >
        Add a filter
        <span class="fa fa-plus"></span>
      </a>
    </div>
  </div>

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

  <div
    class="filter-edit-container"
    ng-if="editingFilter"
  >
    <filter-editor
      filter="editingFilter"
      index-patterns="indexPatterns"
      on-delete="deleteFilter(editingFilter)"
      on-save="saveEdit(filter, newFilter, isPinned)"
      on-cancel="cancelEdit()"
    ></filter-editor>
  </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>
