div(
  class="paasb-searchbox",
  data-search-box="true"
)
  paasb-search-box-filtering(
      search="Search",
      filters="paasbSearchBoxFiltering",
      ng-if="paasbSearchBoxFiltering && paasbSearchBoxFiltering.length"
  )
  div(class="paasb-searchbox-wrapper")
    i(
      class="fa fa-search",
      ng-if="((!hasQuery && !hasFilters) || showMagnifierAlways)",
      ng-class="{ 'magnifier-always-on': showMagnifierAlways }",
      ng-click="handleSearch();"
    )
    i(
      class="fa fa-trash",
      ng-if="(hasQuery || hasFilters)",
      ng-class="{ 'magnifier-always-on': showMagnifierAlways }",
      ng-click="handleGarbage();",
      paasb-draggable="",
      draggable="true"
    )
    paasb-search-box-cache-filter(
      ng-if="paasbSearchBoxCacheFilter"
    )
    i(
      class="fa fa-cog fa-spin",
      ng-if="isLoading",
      ng-class="{ 'no-cache-filtering': !paasbSearchBoxCacheFilter, 'has-eraser-and-no-cache-filtering': (hasQuery && !paasbSearchBoxCacheFilter), 'has-eraser-and-cache-filtering': (hasQuery && paasbSearchBoxCacheFilter), 'magnifier-always-on': showMagnifierAlways, 'has-filters': hasFilters, 'has-query': hasQuery }"
    )
    input(
      type="text",
      ng-model="query",
      id="{{searchInputId}}"
    )
    i(
      class="fa fa-eraser",
      ng-if="hasQuery",
      ng-class="{ 'no-cache-filtering': !paasbSearchBoxCacheFilter, 'magnifier-always-on': showMagnifierAlways }"
      ng-click="handleEraser();"
    )
    paasb-search-box-auto-complete(
      query="searchParams.query",
      config="paasbSearchBoxAutoComplete",
      input="input",
      ng-if="autoCompleteEnabled"
    )