<div class="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="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>{{ filter.meta.key }}:</span>
      <span>"{{ filter.meta.value }}"</span>
    </div>
    <div class="filter-actions">
      <a class="action filter-toggle" ng-click="toggleFilter(filter)">
        <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)">
        <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)">
        <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"></i>
      </a>
    </div>
  </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}"></i>
      </a>
    </div>
  </div>
</div>

<div class="bar 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()">Remove</a></div>
    </div>
  </div>
</div>
