<form
  bitFieldContainer
  [size]="size()"
  role="search"
  class="tw-relative tw-items-center tw-w-full [&_input]:tw-h-full tw-ps-3 tw-pe-1"
>
  <label class="tw-sr-only" [for]="id">{{ "search" | i18n }}</label>
  <bit-icon name="bwi-search"></bit-icon>
  <input
    #input
    [type]="inputType"
    [id]="id"
    [placeholder]="placeholder() ?? ('search' | i18n)"
    class="tw-block tw-size-full tw-bg-transparent tw-text-fg-heading tw-placeholder-fg-body-subtle tw-border-none focus:tw-outline-none [&:disabled]:tw-bg-bg-inactive [&:disabled]:!tw-placeholder-fg-inactive [&:disabled]:!tw-text-fg-inactive tw-ps-2 tw-pe-1"
    name="searchText"
    [ngModel]="searchText()"
    (ngModelChange)="onChange($event)"
    [disabled]="disabled()"
    [attr.autocomplete]="autocomplete()"
    (blur)="onTouch()"
  />
  @if (searchText()) {
    <button
      bitSuffix
      bitIconButton="bwi-clear"
      size="small"
      type="reset"
      [label]="'resetSearch' | i18n"
      (click)="clearSearch()"
    ></button>
  }
</form>
