@if (!inputBoxHostSvc) {
  <ng-container *ngTemplateOutlet="inputTemplateRef" />
}

<ng-template #inputTemplateRef>
  <div
    #lookupWrapper
    class="sky-lookup"
    [ngClass]="{
      'sky-lookup-focused': isInputFocused,
      'sky-lookup-disabled': disabled,
      'sky-lookup-single': selectMode === 'single'
    }"
  >
    <sky-autocomplete
      [ariaLabelledBy]="ariaLabelledBy || inputBoxHostSvc?.labelId"
      [attr.data-sky-lookup-show-more-picker-id]="showMorePickerId"
      [data]="data"
      [debounceTime]="debounceTime"
      [descriptorProperty]="descriptorProperty"
      [enableShowMore]="enableShowMore"
      [messageStream]="autocompleteController"
      [propertiesToSearch]="propertiesToSearch"
      [search]="searchOrDefault"
      [searchAsyncDisabled]="searchAsync.observers.length === 0"
      [searchFilters]="searchFilters"
      [searchResultsLimit]="searchResultsLimit"
      [searchResultTemplate]="searchResultTemplate"
      [searchTextMinimumCharacters]="searchTextMinimumCharacters"
      [showAddButton]="showAddButton"
      [wrapperClass]="wrapperClass"
      (addClick)="addButtonClicked()"
      (searchAsync)="onSearchAsync($event)"
      (selectionChange)="onAutocompleteSelectionChange($event)"
      (showMoreClick)="onShowMoreClick($event)"
      (openChange)="onAutocompleteOpenChange($event)"
    >
      <div class="sky-lookup-search-flex-wrapper">
        <div
          class="sky-lookup-search"
          [ngClass]="{
            'sky-field-status-active': isInputFocused && !disabled
          }"
        >
          @if (selectMode === 'multiple') {
            <sky-tokens
              class="sky-lookup-tokens"
              [disabled]="disabled"
              [displayWith]="descriptorProperty"
              [focusable]="false"
              [messageStream]="tokensController"
              [trackWith]="idProperty"
              [tokens]="tokens"
              (keyup)="onTokensKeyUp($event)"
              (tokensChange)="onTokensChange($event)"
              (tokensRendered)="onTokensRendered()"
              (tokenSelected)="enableShowMore ? openPicker('') : undefined"
              (focusIndexOverRange)="onTokensFocusIndexOverRange()"
            >
              <textarea
                class="sky-form-control sky-lookup-input"
                rows="1"
                skyAutocomplete
                wrap="off"
                [attr.aria-describedby]="ariaDescribedBy | async"
                [attr.aria-label]="ariaLabel"
                [attr.aria-labelledby]="ariaLabelledBy"
                [attr.id]="controlId"
                [attr.placeholder]="placeholderText"
                [autocompleteAttribute]="autocompleteAttribute"
                [disabled]="disabled"
                (blur)="onAutocompleteBlur()"
                (keydown)="inputKeydown($event)"
                (keyup)="inputKeyup($event)"
              ></textarea>
              @if (!inputBoxHostSvc && !enableShowMore) {
                <ng-container *ngTemplateOutlet="searchIconTemplateRef" />
              }
            </sky-tokens>
          } @else if (selectMode === 'single') {
            <div class="sky-lookup-single-control">
              <textarea
                class="sky-form-control sky-lookup-input"
                rows="1"
                skyAutocomplete
                wrap="off"
                [attr.aria-describedby]="ariaDescribedBy | async"
                [attr.aria-label]="ariaLabel"
                [attr.aria-labelledby]="ariaLabelledBy"
                [attr.id]="controlId"
                [attr.placeholder]="placeholderText"
                [autocompleteAttribute]="autocompleteAttribute"
                [disabled]="disabled"
                (blur)="onAutocompleteBlur()"
              ></textarea>
              @if (!inputBoxHostSvc && !enableShowMore) {
                <ng-container *ngTemplateOutlet="searchIconTemplateRef" />
              }
            </div>
          }
        </div>
        @if (!inputBoxHostSvc && enableShowMore) {
          <ng-container *ngTemplateOutlet="showMoreButtonTemplateRef" />
        }
      </div>
    </sky-autocomplete>
  </div>
</ng-template>

<ng-template #showMoreButtonTemplateRef>
  <div class="sky-input-group-btn">
    <button
      class="sky-btn sky-btn-default"
      type="button"
      [disabled]="disabled"
      [ngClass]="{ 'sky-btn-disabled': disabled }"
      [attr.aria-label]="
        'skyux_lookup_search_button_show_more' | skyLibResources
      "
      (click)="onSearchButtonClick()"
    >
      <sky-icon icon="search" />
    </button>
  </div>
</ng-template>

<ng-template #searchIconTemplateRef>
  <div
    class="sky-input-group-icon sky-input-box-icon-inset"
    [ngClass]="{ 'sky-lookup-disabled': disabled }"
  >
    <sky-icon icon="search" />
  </div>
</ng-template>