@let placeholderText = placeholder ? (placeholder | translate) : null;
@let fallbackLabel = placeholderText ? placeholderText : (title | translate);
@let inputLabel = ariaLabelledby ? null : ariaLabel ? ariaLabel : fallbackLabel;

<!-- role="group" legalizes the aria dropdownToggle sets here; the button below carries the state. -->
<div
  class="c8y-search-dropdown dropdown fit-w"
  placement="bottom left"
  role="group"
  dropdown
  [container]="container"
  #dropdown="bs-dropdown"
  [autoClose]="autoClose"
  (onShown)="onShown()"
  (onHidden)="onHidden()"
  [isDisabled]="disabled"
  dropdownToggle
>
  <div class="input-group input-group-dropdown">
    <input
      class="form-control text-truncate"
      [attr.aria-label]="inputLabel"
      [attr.aria-labelledby]="ariaLabelledby"
      type="text"
      #searchControl
      #searchControlModel="ngModel"
      [ngClass]="{
        'p-r-80':
          !hideNew &&
          (selected
            ? selected.id === null && getDisplayProperty()?.length > 0 && allowFreeEntries
            : false),
        'p-r-40': hideNew || getDisplayProperty()?.length === 0
      }"
      [required]="required"
      [ngModel]="selected ? getDisplayProperty() : ''"
      [attr.placeholder]="placeholderText"
      (blur)="doBlur()"
      [name]="name"
      [maxlength]="maxlength"
      [disabled]="disabled"
    />
    @if (
      !hideNew &&
      selected &&
      selected.id === null &&
      getDisplayProperty()?.length > 0 &&
      allowFreeEntries
    ) {
      <span
        class="label label-info p-absolute"
        style="top: 10px; right: 40px; z-index: 10"
      >
        {{ 'New' | translate }}
      </span>
    }

    <span class="input-group-btn">
      <button
        class="btn btn-dot"
        [title]="title"
        [attr.aria-expanded]="dropdown.isOpen"
        [attr.aria-controls]="popupId"
        type="button"
        [disabled]="disabled"
        (click)="onIconClick.emit({ icon, $event })"
        data-cy="typeahead-button"
      >
        <i
          class="text-primary"
          [c8yIcon]="icon"
        ></i>
      </button>
    </span>
  </div>
  <c8y-list-group
    class="dropdown-menu dropdown-menu--modal"
    [style.width]="container === 'body' ? searchControl.clientWidth + 'px' : undefined"
    [id]="popupId"
    data-cy="typeahead--dropdown-menu"
    (click)="onMenuClick()"
    *dropdownMenu
  >
    <ng-content select="div, c8y-li, c8y-list-item, button, a"></ng-content>
  </c8y-list-group>
</div>