<div>
  <label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit"
    >{{ label }} @if(validationMessage){
    <div
      attr.data-tooltip-target="tooltip-{{ name }}"
      class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
    >
      !
    </div>
    <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
    }
  </label>
  <ng-select
    class="custom"
    [multiple]="false"
    [hideSelected]="true"
    [trackByFn]="trackByFn"
    [minTermLength]="2"
    [loading]="cityLoading"
    typeToSearchText="Please enter 2 or more characters"
    [typeahead]="cityInput$"
    ngModel="{{ value?.city }} {{ value ? '-' : '' }} {{ value?.state }}"
    (ngModelChange)="onInputChange($event)"
  >
    @for (city of cities$ | async; track city.id) {
    <ng-option [value]="city">{{ city.city }} - {{ city.state }}</ng-option>
    }
  </ng-select>
</div>
