@if (searchFilterActive$ | async) {
  <div
    class="flex flex-row py-3 px-4 gap-4 overflow-hidden grow border-[1px] border-gray-200"
  >
    <div class="flex flex-row flex-wrap items-center gap-2">
      @for (field of searchFields; track field; let i = $index) {
        <gn-ui-search-filters-summary-item
          [fieldName]="field"
        ></gn-ui-search-filters-summary-item>
      }
    </div>
    <button
      class="bg-white text-black font-bold ml-auto"
      (click)="clearFilters()"
    >
      {{ 'search.filters.clear' | translate }}
    </button>
  </div>
}