<div class="form-inline text-right pull-right">
  <!-- State filter -->
  <span uib-dropdown>
    <span class="pointer" id="dropdownState" uib-dropdown-toggle
      ng-class="{'bold': filter.multiselectFilters.state.length > 0, 'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>State</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownState">
      <li ng-repeat="state in states" ng-class="{'dropdown-header': state.workflowHeader, 'divider': state.divider}">
        <a ng-if="state.workflowHeader">
          {{ state.headername | translate }}
        </a>
        <a href ng-if="!state.workflowHeader && !state.divider"
          ng-click="operateStateFilter(state.id, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.state.indexOf(state.id) > -1"></i>
          {{ state.name | translate }}
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href ng-click="operateStateFilter(-1, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.state.indexOf(-1) > -1"></i>
          <translate>done</translate>
        </a>
      </li>
      <li>
        <a href ng-click="operateStateFilter(-2, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.state.indexOf(-2) > -1"></i>
          <translate>undone</translate>
        </a>
      </li>
    </ul>
  </span>
  <!-- recommendation filter -->
  <span uib-dropdown ng-if="config('motions_recommendations_by') != ''">
    <span class="pointer" id="dropdownRecommendation" uib-dropdown-toggle
      ng-class="{'bold': filter.multiselectFilters.recommendation.length > 0, 'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>Recommendation</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownRecommentation">
      <li ng-repeat="recommendation in recommendations" ng-class="recommendation.workflowHeader ? 'dropdown-header' : ''">
        <a ng-if="recommendation.workflowHeader">
          {{ recommendation.headername | translate }}
        </a>
        <a href ng-if="!recommendation.workflowHeader"
          ng-click="filter.operateMultiselectFilter('recommendation', recommendation.id, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.recommendation.indexOf(recommendation.id) > -1"></i>
          {{ recommendation.recommendation_label | translate }}
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href ng-click="filter.operateMultiselectFilter('recommendation', -1, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.recommendation.indexOf(-1) > -1"></i>
          <translate>No recommendation set</translate>
        </a>
      </li>
    </ul>
  </span>
  <!-- Category filter -->
  <span uib-dropdown ng-if="categories.length > 0">
    <span class="pointer" id="dropdownCategory" uib-dropdown-toggle
      ng-class="{'bold': filter.multiselectFilters.category.length > 0, 'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>Category</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownCategory">
    <li ng-repeat="category in categories | orderBy: config('motions_export_category_sorting')">
        <a href ng-click="filter.operateMultiselectFilter('category', category.id, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.category.indexOf(category.id) > -1"></i>
          {{ category.prefix }} &ndash; {{ category.name }}
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href ng-click="filter.operateMultiselectFilter('category', -1, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.category.indexOf(-1) > -1"></i>
          <translate>No category set</translate>
        </a>
      </li>
    </ul>
  </span>
  <!-- Motion block filter -->
  <span uib-dropdown ng-if="motionBlocks.length > 0">
    <span class="pointer" id="dropdownBlock" uib-dropdown-toggle
      ng-class="{'bold': filter.multiselectFilters.motionBlock.length > 0, 'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>Motion block</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownBlock">
      <li ng-repeat="block in motionBlocks | orderBy: 'title'">
        <a href ng-click="filter.operateMultiselectFilter('motionBlock', block.id, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.motionBlock.indexOf(block.id) > -1"></i>
          {{ block.title }}
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href ng-click="filter.operateMultiselectFilter('motionBlock', -1, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.motionBlock.indexOf(-1) > -1"></i>
          <translate>No motion block set</translate>
        </a>
      </li>
    </ul>
  </span>
  <!-- Comment filter -->
  <span uib-dropdown ng-if="showCommentsFilter()">
    <span class="pointer" id="dropdownComment" uib-dropdown-toggle
      ng-class="{'bold': filter.multiselectFilters.comment.length > 0, 'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>Comment</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-left" aria-labelledby="dropdownComment">
      <li ng-repeat="(index, commentsField) in noSpecialCommentsFields">
        <a href ng-click="filter.operateMultiselectFilter('comment', index, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.comment.indexOf(index) > -1"></i>
          {{ commentsField.name }} <translate>is set</translate>
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href ng-click="filter.operateMultiselectFilter('comment', -1, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.comment.indexOf(-1) > -1"></i>
          <translate>No comments set</translate>
        </a>
      </li>
    </ul>
  </span>
  <!-- Tag filter -->
  <span uib-dropdown ng-if="tags.length > 0">
    <span class="pointer" id="dropdownTag" uib-dropdown-toggle
      ng-class="{'bold': filter.multiselectFilters.tag.length > 0, 'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>Tag</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownTag">
      <li ng-repeat="tag in tags">
        <a href ng-click="filter.operateMultiselectFilter('tag', tag.id, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.tag.indexOf(tag.id) > -1"></i>
          {{ tag.name }}
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href ng-click="filter.operateMultiselectFilter('tag', -1, isSelectMode)">
          <i class="fa fa-check" ng-if="filter.multiselectFilters.tag.indexOf(-1) > -1"></i>
          <translate>No tag set</translate>
        </a>
      </li>
    </ul>
  </span>
  <!-- boolean Filters (customized!) -->
  <span ng-if="operator.user.id" uib-dropdown>
    <span class="pointer" id="dropdownMisc" uib-dropdown-toggle
      ng-class="{'bold': (filter.booleanFilters.isFavorite.value !== undefined) ||
      (filter.booleanFilters.hasPersonalNote.value !== undefined), 'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>Misc</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMisc">
      <li>
        <a href ng-click="filter.booleanFilters.isFavorite.value = (filter.booleanFilters.isFavorite.value ? undefined : true); filter.save();">
          <i class="fa" ng-class="{'fa-check': filter.booleanFilters.isFavorite.value === true}"></i>
          {{ filter.booleanFilters.isFavorite.choiceYes | translate }}
        </a>
      </li>
      <li>
        <a href ng-click="filter.booleanFilters.isFavorite.value = (filter.booleanFilters.isFavorite.value === false) ? undefined : false; filter.save();">
          <i class="fa" ng-class="{'fa-check': filter.booleanFilters.isFavorite.value === false}"></i>
          {{ filter.booleanFilters.isFavorite.choiceNo | translate }}
        </a>
      </li>
      <li class="divider"></li>
      <li>
        <a href ng-click="filter.booleanFilters.hasPersonalNote.value = (filter.booleanFilters.hasPersonalNote.value ? undefined : true); filter.save();">
          <i class="fa" ng-class="{'fa-check': filter.booleanFilters.hasPersonalNote.value === true}"></i>
          {{ filter.booleanFilters.hasPersonalNote.choiceYes | translate }}
        </a>
      </li>
      <li>
        <a href ng-click="filter.booleanFilters.hasPersonalNote.value = (filter.booleanFilters.hasPersonalNote.value === false) ? undefined : false; filter.save();">
          <i class="fa" ng-class="{'fa-check': filter.booleanFilters.hasPersonalNote.value === false}"></i>
          {{ filter.booleanFilters.hasPersonalNote.choiceNo | translate }}
        </a>
      </li>
    </ul>
  </span>
  <!-- dropdown sort -->
  <span uib-dropdown>
    <span class="pointer" id="dropdownSort" uib-dropdown-toggle
      ng-class="{'disabled': isSelectMode}"
      ng-disabled="isSelectMode">
      <translate>Sort</translate>
      <span class="caret"></span>
    </span>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownSort">
      <!-- item -->
      <li>
        <a href ng-click="sort.toggle('agenda_item.getItemNumberWithAncestors()')">
          <translate translate-comment="short form of agenda item">Item</translate>
          <span class="spacer-right pull-right"></span>
          <i class="pull-right fa"
            ng-style="{'visibility': sort.column === 'agenda_item.getItemNumberWithAncestors()' ? 'visible' : 'hidden'}"
            ng-class="sort.reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
          </i>
        </a>
      </li>
      <!-- all other sortOptions -->
      <li ng-repeat="option in sortOptions">
        <a href ng-click="sort.toggle(option.name)">
        {{ option.display_name | translate }}
        <span class="spacer-right pull-right"></span>
          <i class="pull-right fa"
            ng-style="{'visibility': sort.column === option.name ? 'visible' : 'hidden'}"
            ng-class="sort.reverse ? 'fa-sort-amount-desc' : 'fa-sort-amount-asc'">
          </i>
        </a>
      </li>
    </ul>
  </span>
  <!-- search field -->
  <span class="form-group">
    <span class="input-group">
      <span class="input-group-addon"><i class="fa fa-search"></i></span>
      <input type="text" ng-model="filter.filterString" class="form-control"
         placeholder="{{ 'Search' | translate}}" ng-disabled="isSelectMode"
         ng-change="filter.save()">
    </span>
  </span>
</div>
<!-- show all selected multiselectoptions -->
<div>
  <!-- clear all filters -->
  <span class="spacer-left-lg pointer" ng-click="resetFilters(isSelectMode)"
    ng-if="filter.areFiltersSet()" ng-disabled="isSelectMode"
    ng-class="{'disabled': isSelectMode}">
    <i class="fa fa-window-close"></i>
    <strong translate>All Filters</strong>
  </span>
  <!-- state -->
  <span ng-repeat="state in states" class="pointer spacer-left-lg"
    ng-if="!state.workflowHeader && filter.multiselectFilters.state.indexOf(state.id) > -1"
    ng-click="operateStateFilter(state.id, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <span class="nobr">
      <i class="fa fa-times-circle"></i>
      {{ state.name | translate }}
    </span>
  </span>
  <span ng-if="filter.multiselectFilters.state.indexOf(-1) > -1" class="pointer spacer-left-lg"
    ng-click="operateStateFilter(-1, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <i class="fa fa-times-circle"></i>
    <translate>done</translate>
  </span>
  <span ng-if="filter.multiselectFilters.state.indexOf(-2) > -1" class="pointer spacer-left-lg"
    ng-click="operateStateFilter(-2, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <i class="fa fa-times-circle"></i>
    <translate>undone</translate>
  </span>
  <!-- category -->
  <span ng-repeat="category in categories | orderBy: config('motions_export_category_sorting')"
    class="pointer spacer-left-lg"
    ng-if="filter.multiselectFilters.category.indexOf(category.id) > -1"
    ng-click="filter.operateMultiselectFilter('category', category.id, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <span class="nobr">
      <i class="fa fa-times-circle"></i>
      {{ category.prefix }} &ndash; {{ category.name }}
    </span>
  </span>
  <span ng-if="filter.multiselectFilters.category.indexOf(-1) > -1" class="pointer spacer-left-lg"
    ng-click="filter.operateMultiselectFilter('category', -1, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <i class="fa fa-times-circle"></i>
    <translate>No category set</translate>
  </span>
  <!-- motion block -->
  <span ng-repeat="motionBlock in motionBlocks | orderBy: 'title'" class="pointer spacer-left-lg"
    ng-if="filter.multiselectFilters.motionBlock.indexOf(motionBlock.id) > -1"
    ng-click="filter.operateMultiselectFilter('motionBlock', motionBlock.id, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <span class="nobr">
      <i class="fa fa-times-circle"></i>
      {{ motionBlock.title }}
    </span>
  </span>
  <!-- comment -->
  <span ng-repeat="(index, commentsField) in noSpecialCommentsFields" class="pointer spacer-left-lg"
    ng-if="filter.multiselectFilters.comment.indexOf(index) > -1"
    ng-click="filter.operateMultiselectFilter('comment', index, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <span class="nobr">
      <i class="fa fa-times-circle"></i>
      {{ commentsField.name }}
    </span>
  </span>
  <span ng-if="filter.multiselectFilters.comment.indexOf(-1) > -1" class="pointer spacer-left-lg"
    ng-click="filter.operateMultiselectFilter('comment', -1, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <i class="fa fa-times-circle"></i>
    <translate>No comments set</translate>
  </span>
  <!-- recommendation -->
  <span ng-repeat="recommendation in recommendations" class="pointer spacer-left-lg"
    ng-if="filter.multiselectFilters.recommendation.indexOf(recommendation.id) > -1"
    ng-click="filter.operateMultiselectFilter('recommendation', recommendation.id, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <span class="nobr">
      <i class="fa fa-times-circle"></i>
      {{ recommendation.recommendation_label | translate }}
    </span>
  </span>
  <span ng-if="filter.multiselectFilters.motionBlock.indexOf(-1) > -1" class="pointer spacer-left-lg"
    ng-click="filter.operateMultiselectFilter('motionBlock', -1, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <i class="fa fa-times-circle"></i>
    <translate>No motion block set</translate>
  </span>
  <!-- tags -->
  <span ng-repeat="tag in tags" class="pointer spacer-left-lg"
    ng-if="filter.multiselectFilters.tag.indexOf(tag.id) > -1"
    ng-click="filter.operateMultiselectFilter('tag', tag.id, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <span class="nobr">
      <i class="fa fa-times-circle"></i>
      {{ tag.name }}
    </span>
  </span>
  <span ng-if="filter.multiselectFilters.tag.indexOf(-1) > -1" class="pointer spacer-left-lg"
    ng-click="filter.operateMultiselectFilter('tag', -1, isSelectMode)"
    ng-class="{'disabled': isSelectMode}">
    <i class="fa fa-times-circle"></i>
    <translate>No tag set</translate>
  </span>
  <!-- for all boolean Filters -->
  <span ng-repeat="(name, booleanFilter) in filter.booleanFilters"
    ng-hide="booleanFilter.value === undefined"
    class="pointer spacer-left-lg"
    ng-click="booleanFilter.value = undefined; filter.save();"
    ng-class="{'disabled': isSelectMode}">
    <span class="nobr">
      <i class="fa fa-times-circle"></i>
      {{ booleanFilter.value ? booleanFilter.choiceYes : booleanFilter.choiceNo | translate }}
    </span>
  </span>
</div>
