@if (label()) {
  <label class="ngm-select-label shrink-0" [title]="label()">
    {{label()}}
  </label>
}

@if (!searchable()) {
  <div class="relative">
    <mat-select class="ngm-select-element relative" [panelClass]="'ngm-select-panel ' + (displayDensity() === 'compact' ? 'ngm-density__compact' : '') + ' ' + (displayDensity() === 'cosy' ? 'ngm-density__cosy' : '')"
      [formControl]="formControl"
      [placeholder]="placeholder()"
      [panelWidth]="panelWidth() || 'auto'"
      [multiple]="multiple()"
    >
      <mat-select-trigger *ngIf="selectTrigger()" class="flex items-center overflow-hidden">
        <span class="flex-1">
          {{selectTrigger().caption || selectTrigger().label || selectTrigger()[valueKey()] || placeholder}}
        </span>
      </mat-select-trigger>
      @for (option of selectOptions(); track option[valueKey()]) {
        <mat-option [value]="option[valueKey()]">
          <ng-container *ngTemplateOutlet="optionTemplate; context: {$implicit: option}"></ng-container>
        </mat-option>
      }
    </mat-select>

    <div class="absolute right-6 top-0 h-full flex items-center">
      <ng-container *ngTemplateOutlet="suffixTemplate"></ng-container>
    </div>
  </div>
} @else {
  <div class="relative">
    <input class="ngm-input-element w-full relative"
      type="text"
      [placeholder]="placeholder()"
      matInput
      [ngModel]="autoInput()"
      (ngModelChange)="onAutoInput($event)"
      (blur)="onBlur($event)"
      [matAutocomplete]="auto"
    />
  
    <div class="absolute right-0 top-0 h-full flex items-center">
      <ng-container *ngTemplateOutlet="suffixTemplate"></ng-container>
    </div>
  </div>
}

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" class="ngm-select__autocomplete-panel ngm-autocomplete-panel"
  [class]="(displayDensity() === 'compact' ? 'ngm-density__compact' : '') + ' ' + (displayDensity() === 'cosy' ? 'ngm-density__cosy' : '')"
  [panelWidth]="panelWidth() || null"
  [displayWith]="displayWith"
  (optionSelected)="onOptionSelected($event)"
>
  @if (virtualScroll()) {
    <cdk-virtual-scroll-viewport class="nx-formly__virtual-scroll-viewport" minBufferPx="200" maxBufferPx="400"
      [style.height.px]="240" [itemSize]="30"
    >
      <mat-option *cdkVirtualFor="let option of options$(); trackBy: trackByValue" [value]="option">
        <ng-container *ngTemplateOutlet="optionTemplate; context: {$implicit: option}"></ng-container>
      </mat-option>
    </cdk-virtual-scroll-viewport>
  } @else {
    @for (option of options$(); track option.key) {
      <mat-option [value]="option" class="text-sm">
        <ng-container *ngTemplateOutlet="optionTemplate; context: {$implicit: option}"></ng-container>
      </mat-option>
    }
  }
</mat-autocomplete>

<mat-error class="text-xs h-4">
  @if (formControl.invalid) {
    <span>{{formControl.getError('error')}}</span>
  }
  <ng-content select="[ngmError]"></ng-content>
</mat-error>

<ng-template #optionTemplate let-option>
  <ng-template [ngIf]="_explicitContent" [ngIfElse]="optionTextLabel">
    <ng-container *ngTemplateOutlet="_explicitContent; context: {$implicit: option, value: option.value, caption: option.caption, key: option.key, highlight: highlight()}"></ng-container>
  </ng-template>
  <ng-template #optionTextLabel>
    @if (option.icon) {
      <mat-icon [fontSet]="option.fontSet">{{option.icon}}</mat-icon>
    }
    <ngm-display-behaviour class="flex-1 overflow-hidden" [displayBehaviour]="displayBehaviour()"
      [option]="option"
      [highlight]="highlight()"
    />
  </ng-template>
</ng-template>

<ng-template #suffixTemplate>
  <ng-content select="[ngmSuffix]"></ng-content>
</ng-template>