<!--<ion-header>
  <ion-toolbar>
    <ion-title>Login Page</ion-title>
  </ion-toolbar>
</ion-header>-->

<ion-content class="prova">
  <div class="body">
    <div class="contenitore">
      <div class="logo-grande">
        <img src="assets/icon/2p2-logo-color.svg" />
      </div>
      <form #form="ngForm" (ngSubmit)="login(form)" class="form"> 
        <ion-grid>
          <ion-row justify-content-center>
            <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
              <div>
                <ion-item class="login-field">
                  <ion-icon class="field-icon" item-left name="person" color="light"></ion-icon>
                  <ion-input name="username" type="text" placeholder="{{ 'username' | translate }}" ngModel required></ion-input>
                </ion-item>
                <ion-item class="login-field">
                  <ion-icon class="field-icon" item-left name="lock" color="light"></ion-icon>
                  <ion-input name="password" type="password" placeholder="{{ 'password' | translate }}" ngModel required></ion-input>
                </ion-item>
              </div>
              <div class="accedi" >
                <ion-button size="large" type="submit" [disabled]="form.invalid" expand="block" tappable>{{ 'accedi' | translate }}</ion-button>
              </div>
            </ion-col>
          </ion-row>
          <ion-row color="primary" justify-content-center>
            <div text-center class="forgot">
              <a (click)='reset()' tappable>{{ 'lost_password' | translate }}</a>
            </div>
          </ion-row>
          <ion-row color="primary" justify-content-center>
            <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
              <div class="business-call">
                <div class="non-account">
                  {{ 'hai_account' | translate }}
                </div>
                <div class="title-call">
                  {{ 'prenota_subito' | translate }}<br />{{ 'tua' | translate }} <span class="giallo">{{ 'business_call' | translate }}</span>
                </div>
                <div class="descr-call">
                  {{ 'consulenti' | translate }} <strong>{{ 'gratuita' | translate }}</strong> {{ 'su_misura' | translate }}
                </div>
                <div class="appuntamento">
                  <a (click)='redirectBusiness()' tappable>{{ 'prenota_app' | translate }}</a>
                </div>
              </div>
            </ion-col>
          </ion-row>
          <ion-row justify-content-center>
            <ion-col align-self-center size-md="6" size-lg="5" size-xs="12" style="color: white">
              <ion-row>
                <ion-label class="label-border" style="margin-top: 8px;">{{ 'lingua_selezionata' | translate }}</ion-label> 
                <ion-select value="clienteSel" [(ngModel)]="linguaSel" (ionChange)="cambiaLingua()" placeholder="{{linguaSel}}" interface="popover" title="{{ 'seleziona_lingua' | translate }}"> 
                  <ion-select-option *ngFor="let lingua of lingue; let i=index;" value="{{lingua.key}}">{{lingua.value}}</ion-select-option>
                </ion-select>
              </ion-row>
            </ion-col>
          </ion-row>
        </ion-grid>
      </form>
    </div>
  </div>
</ion-content>