<div (keydown)="onMainKeydown($event)" class="autocomplete-wrapper">
  <input
    #input
    class="input-val"
    type="text"
    autocomplete="off"
    [id]="inputId"
    [attr.list]="'datalist_' + inputId"
    autofocus
    tabindex="0"
    [placeholder]="placeholder"
    [(ngModel)]="value"
    (click)="onInputClick($event)"
    (ngModelChange)="onInputFired($event)"
    (mouseenter)="onInputMouseenter($event)"
    (focus)="onInputFocusin($event)"
    (focusout)="onInputFocusout($event)"
    (keyup)="onInputKeyup($event)"
    [disabled]="disabled"
  />

  <div class="overlay" [class.hidden]="!datalistOpen"></div>

  <div
    (click)="onDataListClick($event)"
    (mouseenter)="onDataListMouseEnter($event)"
    (mouseleave)="onDataListMouseLeave($event)"
    (scroll)="onDataListScroll($event)"
    [ngStyle]="{
      'width.px': inputClientRect.width,
      'max-height.px':
        innerHeight && inputClientRect.bottom
          ? innerHeight - inputClientRect.bottom
          : undefined
    }"
    class="datalist"
    [class.hidden]="!datalistOpen"
    [id]="'datalist_' + inputId"
  >
    <div #options>
      <ng-content></ng-content>
    </div>

    <option
      *ngIf="options.children.length > 0 && enableLoadMore"
      data-type="load-more"
      class="load-more"
    >
      {{ loadingMore ? 'Loading...' : 'LOAD MORE' }}
    </option>
  </div>
</div>
