<div [ngClass]="{'background-color': backgroundColor}">

  <div class="alert alert-warning shadow-lg" *ngIf="allert" id="alert">
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
           viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
      </svg>
      <span>{{translations.alertMessage}}</span>
    </div>
  </div>

  <div class="bg-image">

    <div class="search">

      <div class="inputElements">
        <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
               (keydown)="selezionaSuggerimento($event)" placeholder="{{translations.searchPlaceholder}}"
               class="input input-bordered input-primary btn-wide">

        <button
          class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
          (click)="onSearch()">
          {{translations.searchButton}}
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
          </svg>
        </button>

      </div>
    </div>
    <ng-container *ngIf="locationsPopup | async as locations;">
      <ul *ngIf="locations.length > 0" class="menu bg-base-200 p-2 rounded-box" id="list"
          [style.width.px]="myInput.offsetWidth">

        <li class="menu-title">
          <span>{{translations.menuPlaces}}</span>
        </li>

        <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
          {{luogo.location}}
        </li>

      </ul>
    </ng-container>
  </div>
</div>
