<label for="packageVersion">{{ label | translate }}</label>
<c8y-form-group>
  <c8y-typeahead
    [(ngModel)]="selectedVersion"
    name="packageVersion"
    (onSearch)="onInput$.next($event)"
    placeholder="{{ 'Select below or start typing' | translate }}"
    [displayProperty]="'version'"
    [required]="true"
    [disabled]="isDisabled"
    [hideNew]="true"
    [container]="'body'"
  >
    <c8y-li
      *c8yFor="let appVersion of versions$; loadMore: 'auto'; notFound: notFoundTemplate"
      (click)="onVersionSelect(appVersion)"
      class="p-l-8 p-r-8 c8y-list__item--link"
      [active]="selectedVersion === appVersion"
    >
      <c8y-li-icon icon="big-parcel"></c8y-li-icon>
      <span
        [ngStyle]="{
          display: 'flex',
          'flex-direction': 'row',
          'align-content': 'center',
          'justify-content': 'space-between',
          'align-items': 'center'
        }"
      >
        <c8y-highlight
          [text]="appVersion.version || '--'"
          [pattern]="onInput$ | async"
        ></c8y-highlight>
        <span>
          <span *ngFor="let tag of appVersion.tags" class="label label-info m-l-4">
            {{ tag }}
          </span>
        </span>
      </span>
    </c8y-li>
    <ng-template #notFoundTemplate>
      <c8y-li
        class="bg-gray-lighter p-8"
        *ngIf="(onInput$ | async)?.length > 0 && (versions$ | async)?.data?.length === 0"
      >
        <span translate>No match found.</span>
      </c8y-li>
    </ng-template>
  </c8y-typeahead>
</c8y-form-group>