<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()"
>
  <filter-pill
    ng-repeat="filter in filters track by $index"
    filter="filter"
    on-toggle-filter="toggleFilter"
    on-pin-filter="pinFilter"
    on-invert-filter="invertFilter"
    on-delete-filter="deleteFilter"
    on-edit-filter="editFilter"
  ></filter-pill>

  <div
    class="filter-link"
    ng-show="showAddFilterButton()"
  >
    <div class="filter-description small">
      <a
        ng-click="addFilter()"
        kbn-accessible-click
        data-test-subj="addFilter"
      >
        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"
        kbn-accessible-click
        aria-expanded="{{!!showFilterActions}}"
        aria-controls="filterActionsAllContainer"
      >
        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"
  id="filterActionsAllContainer"
>
  <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)" kbn-accessible-click>Enable</a></div>
      </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="toggleAll(true)" kbn-accessible-click>Disable</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="pinAll(true)" kbn-accessible-click>Pin</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="pinAll(false)" kbn-accessible-click>Unpin</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="invertAll()" kbn-accessible-click>Invert</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="toggleAll()" kbn-accessible-click>Toggle</a></div>
    </div>
    <div class="filter-link">
      <div class="filter-description"><a ng-click="removeAll()" data-test-subj="removeAllFilters" kbn-accessible-click>Remove</a></div>
    </div>
  </div>
</div>
