<div class="input-group has-clear flex-nowrap" [ngClass]="{ 'has-icon': icon() }" ngbDropdown placement="bottom-left auto" container="body">

  @if (hasFilters()) {
    <button class="input-group-text c-hand" title="Open quick filters" i18n-title ngbDropdownToggle>
    </button>

    <div role="menu" ngbDropdownMenu>
      @for (group of filters(); track group) {
        <div class="dropdown-header">{{ group.title }}</div>

        @for (filter of group.children; track filter) {
          <button (click)="onFilterClick(filter)" class="dropdown-item">
            <my-global-icon [ngClass]="{ 'no-visible': !isFilterEnabled(filter) }" iconName="tick"></my-global-icon>
            {{ filter.label }}
          </button>
        }
      }
    </div>
  }

  @if (icon()) {
    <button class="button-unstyle search-button" title="Search" i18n-title (click)="onSearchClick()">
      <my-global-icon iconName="search"></my-global-icon>
    </button>
  }

  <input
    type="text" [name]="inputId()" [id]="inputId()" [placeholder]="placeholder()"
    class="last-in-group"
    [ngClass]="{ 'first-in-group': !hasFilters() }"
    [(ngModel)]="searchValue"
    (keyup)="onInputSearch($event)"
    #input
    >

  <button class="p-0 border-0 form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter(); input.focus()">
    <my-global-icon iconName="cross" ></my-global-icon>
  </button>
</div>
