<div v-if="hasQuery(searchQueries)" class="selected-filters">
  <div
    class="selected-filter"
    v-for="searchQuery in searchQueries"
    :key="searchQuery.id"
  >
    <div v-if="isFilter(searchQuery)" class="selected-filter-text">
      {{ searchQuery.field }}:
      <b>{{ searchQuery.value }}</b>
    </div>
    <div
      v-if="isRange(searchQuery)"
      class="selected-filter-text"
    >Range: {{ searchQuery.value.lte }} to {{ searchQuery.value.gte }}</div>
    <div
      v-if="isTextQuery(searchQuery)"
      class="selected-filter-text"
    >{{searchQuery.value}}</div>

    <a v-on:click="deleteBreadCrumb(searchQuery)" class="selected-filter-clear"></a>
  </div>

  <div v-if="hasQueries(searchQueries)" class="selected-filter">
    <a
      class="selected-filter-text clear-all"
      v-on:click="deleteAllBreadCrumbs()"
    >Clear All</a>
  </div>
</div>