<section aria-label="Filters">
  <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"/>
        <span ng-if="filter.meta.negate">NOT </span> {{ 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 filter-panel"
    ng-class="filterNavToggle.isOpen == true || !showCollapseLink() ? '' : 'filter-panel--close'"
  >
    <div class="filter-panel__pill">
      <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>

    <div
      class="filter-link"
    >
      <div class="filter-description small">
        <button
          ng-click="addFilter()"
          class="euiLink euiLink--primary"
          data-test-subj="addFilter"
        >
          Add a filter
          <span class="fa fa-plus"></span>
        </button>
      </div>
    </div>

    <div
      class="filter-link pull-right"
      ng-class="filterNavToggle.isOpen == true || !showCollapseLink() ? '' : 'action-show'"
      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-nav-link__icon"
      tooltip="{{ filterNavToggle.tooltipContent }}"
      tooltip-placement="left"
      tooltip-popup-delay="0"
      tooltip-append-to-body="1"
      ng-show="filters.length && showCollapseLink()"
      aria-hidden="!filters.length || !showCollapseLink()"
    >
      <button
        class="filter-nav-link__collapser"
        ng-click="toggleFilterShown($event)"
        aria-expanded="true"
        aria-label="Toggle filterbar"
      >
        <span class="kuiIcon" ng-class="filterNavToggle.isOpen == true ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'"></span>
      </button>
    </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>
</section>
