<c8y-typeahead
  [ngStyle]="style"
  name="softwareType"
  [(ngModel)]="softwareTypeMO"
  [required]="required"
  [disabled]="disabled"
  [placeholder]="placeholder"
  [allowFreeEntries]="allowFreeEntries"
  #deviceSoftwareTypeModel
  (onSearch)="search$.next($event)"
  displayProperty="softwareType"
>
  @if (showClearSelectionOption) {
    <c8y-li
      class="p-l-8 p-r-8 c8y-list__item--link"
      (click)="clearSoftware()"
      [active]="!softwareTypeMO?.softwareType"
    >
      <span>{{ clearSelectionOptionLabel | translate }}</span>
    </c8y-li>
  }
  <c8y-li
    class="p-l-8 p-r-8 c8y-list__item--link"
    *c8yFor="
      let software of softwaresResult$;
      pipe: filterPipe;
      loadMore: 'auto';
      notFound: notFoundTemplateToUse
    "
    (click)="selectSoftware(software)"
    [active]="softwareTypeMO?.softwareType === software.softwareType"
  >
    <c8y-highlight
      [text]="software.softwareType || '--'"
      [pattern]="search$ | async"
    ></c8y-highlight>
  </c8y-li>
  <ng-template #notFoundTypeAddNewTemplate>
    @if ((search$ | async)?.length > 0) {
      <c8y-li class="bg-level-2 p-8">
        <span translate>No match found.</span>
        <button
          class="btn btn-primary btn-xs m-l-8"
          title="{{ 'Add new`software type`' | translate }}"
          type="button"
          translate
        >
          Add new`software type`
        </button>
      </c8y-li>
    }
  </ng-template>
  <ng-template #notFoundTypeTemplate>
    @if ((search$ | async)?.length > 0 && (softwaresResult$ | async)?.data?.length === 0) {
      <c8y-li class="bg-level-2 p-8">
        <span translate>No match found. Refine your search terms or check your spelling.</span>
      </c8y-li>
    }
  </ng-template>
</c8y-typeahead>