<ng-container *transloco="let t; prefix:'typeahead'">
  @if(settings) {
    <form [formGroup]="typeaheadForm">
      <div class="input-group {{hasFocus ? 'open': ''}} {{locked ? 'lock-active' : ''}}" #triggerEl cdkOverlayOrigin #trigger="cdkOverlayOrigin">
        @if (settings.showLocked) {
          <span class="input-group-text clickable" (click)="toggleLock($event)"><i class="fa fa-lock" aria-hidden="true"></i>
          <span class="visually-hidden">{{t('locked-field')}}</span>
        </span>
        }

        <div class="typeahead-input" [ngClass]="{'disabled': disabled}" (click)="onInputFocus($event)">
          @if (optionSelection) {
            @for (option of optionSelection.selected(); track option; let i = $index) {
              <app-tag-badge fillStyle="filled">
                <ng-container [ngTemplateOutlet]="badgeTemplate()" [ngTemplateOutletContext]="{ $implicit: option, idx: i, value:  typeaheadControl.value }" />
                @if (!disabled) {
                  <i class="fa fa-times" (click)="toggleSelection(option)" tabindex="0" [attr.aria-label]="t('close')"></i>
                }
              </app-tag-badge>
            }
          }

          @if (!disabled) {
            <input #input [id]="settings.id" type="text" autocomplete="off" formControlName="typeahead">
          }


          @if (isLoadingOptions) {
            <div class="spinner-border spinner-border-sm {{settings.multiple ? 'close-offset' : ''}}" role="status">
              <span class="visually-hidden">{{t('loading')}}</span>
            </div>
          }

          @if (!disabled && settings.multiple && (selectedData | async); as selected) {
            @if (selected.length > 0) {
              <button class="btn btn-close float-end mt-2" style="font-size: 0.8rem;" (click)="clearSelections(true);$event.stopPropagation()"></button>
            }
          }
        </div>
      </div>

      <!-- Dropdown content template -->
      <ng-template #dropdownContent let-options>
        <div class="dropdown" [class.dropdown-overlay]="useOverlay"
             animate.enter="slide-in-from-top"
             animate.leave="slide-out-to-top">
          <ul class="list-group results" #results>
            @if (showAddItem) {
              <li class="list-group-item add-item" role="option" (mouseenter)="focusedIndex = 0; updateHighlight();" (click)="addNewItem(typeaheadControl.value)">
                {{t('add-item', {item: typeaheadControl.value})}}
              </li>
            }

            @for(option of options; track settings.trackByIdentityFn(index, option); let index = $index) {
              <li (click)="handleOptionClick(option)"
                  class="list-group-item" role="option" [attr.data-index]="index"
                  (mouseenter)="focusedIndex = index + (showAddItem ? 1 : 0); updateHighlight();">
                <ng-container [ngTemplateOutlet]="optionTemplate()" [ngTemplateOutletContext]="{ $implicit: option, idx: index, value:  typeaheadControl.value }" />
              </li>
            }

            @if (options.length === 0 && !showAddItem) {
              <li class="list-group-item no-hover" role="listitem">
                {{t('no-data')}}{{settings.addIfNonExisting ? t('add-custom-item') : ''}}
              </li>
            }
          </ul>
        </div>
      </ng-template>

      <!-- Relative mode (default) -->
      @if (!useOverlay) {
        @if (filteredOptions | async; as options) {
          @if (hasFocus) {
            <ng-container *ngTemplateOutlet="dropdownContent; context: { $implicit: options }" />
          }
        }
      }

      <!-- Body/overlay mode -->
      <ng-template cdkConnectedOverlay
        [cdkConnectedOverlayOrigin]="trigger"
        [cdkConnectedOverlayOpen]="hasFocus && useOverlay"
        [cdkConnectedOverlayWidth]="triggerWidth"
        [cdkConnectedOverlayPositions]="overlayPositions"
        [cdkConnectedOverlayPush]="true"
        [cdkConnectedOverlayScrollStrategy]="repositionScrollStrategy">
        @if (filteredOptions | async; as options) {
          <ng-container *ngTemplateOutlet="dropdownContent; context: { $implicit: options }" />
        }
      </ng-template>
    </form>
  }
</ng-container>
