@let vm = model$ | async;
<p-autocomplete
  name="indirizzo"
  [disabled]="vm!.disabled"
  [ngModel]="vm!.indirizzo"
  [suggestions]="vm!.predictions"
  class="w-full"
  placeholder="es. Piazza Roma"
  styleClass="w-full"
  inputStyleClass="w-full"
  minLength="6"
  delay="500"
  optionLabel="description"
  [forceSelection]="true"
  appendTo="body"
  [showClear]="false"
  emptyMessage="Nessun risultato trovato"
  (completeMethod)="getPlacePredictions($event)"
  (onSelect)="getPlaceDetail($event)"
>
  <ng-template let-place #item>
    <div class="flex align-items-center">
      <i class="fs-16 mr-3 text-color-secondary pi pi-map-marker"></i>
      <div class="flex flex-col">
        <span>{{ place.description }}</span>
        @if (vm?.codiceLuogo) {
          <small class="text-sm text-color-secondary">
            <b
              >{{ vm?.codiceLuogo?.comune }},
              {{ vm?.codiceLuogo?.siglaProvincia }}</b
            ></small
          >
        }
      </div>
    </div>
  </ng-template>
  <ng-template let-place #footer>
    <div class="flex align-items-left p-1">
      <img
        class="powered-by-google"
        src="assets/images/google/powered_by_google_on_white.png"
        alt="Powered by Google"
      />
    </div>
  </ng-template>
</p-autocomplete>
