<div class="input-group input-group-search">
  <input
    class="form-control"
    placeholder="{{ 'Filter…' | translate }}"
    type="text"
    [value]="filterTerm"
    (keydown)="filterChange$.next($event)"
    px-event="Filter…"
    data-cy="filter-input--filter-input"
  />
  <span class="input-group-btn">
    <button
      class="btn btn-clean"
      title="{{ filterTerm.length === 0 ? searchLabel : closeLabel }}"
      px-event="Clear filtering"
      (click)="reset()"
    >
      <i [c8yIcon]="filterTerm.length === 0 ? 'search' : 'close'"></i>
    </button>
  </span>
</div>