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

<div class="body-desktop" *ngIf="!platform.is('desktop')">
  <div class="body-blue"></div>
  <div class="body-img1"></div>
  <div class="body-form">
    <ion-content class="content-login-smartphone">
      <div>
        <div class="contenitore">
          <div class="logo-grande">
            <img src="assets/img/LogoBianco.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="standard-padding">
                    <ion-button class="bc-invia" 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 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-desktop" style="margin-top: 8px;">{{ 'lingua_selezionata' | translate }}</ion-label> 
                    <ion-select placeholder="{{linguaSel}}" (ionChange)="cambiaLingua()" interface="popover" title="{{ 'seleziona_lingua' | translate }}"> 
                      <ion-select-option *ngFor="let lingua of lingue; let i=index;" [value]="lingua.key" [selected]="i === 0">{{lingua.value}}</ion-select-option>
                    </ion-select>
                  </ion-row>
                </ion-col>
              </ion-row>
              <ion-row color="primary" justify-content-center>
                
              </ion-row>
            </ion-grid>
          </form>
        </div>
      </div>
    </ion-content>
    <ion-footer class="footer-smartphone">
      <ion-col class="desktop-bcall-col"align-self-center>
        <div class="smartphone-bcall">
          <div class="bcall-title">
            {{ 'bcall_title' | translate }}
          </div>
          <div>
            <a (click)='redirectBusiness()' tappable class="bcall-content">
              {{ 'bcall_content' | translate }}
            </a>
          </div>
          <ion-img (click)='redirectBusiness()' src="../../../../assets/img/Risorsa3.png"></ion-img>
        </div>
      </ion-col>
    </ion-footer>
  </div>
</div>

<div class="body-desktop" *ngIf="platform.is('desktop')">
  <div class="body-blue"></div>
  <div class="body-img1"></div>
  <div class="body-img2"></div>
  <div class="body-form">
    <ion-content class="login-desktop-content">
      <div>
        <div class="contenitore-desktop" *ngIf="platform.is('desktop')">
          <div class="logo-grande">
            <img src="assets/icon/2p2-logo-color.svg" />
          </div>
          
        </div>
      </div>
    </ion-content>

    <ion-footer class="contenitore-desktop" *ngIf="platform.is('desktop')" no-border>
        <form #form="ngForm" (ngSubmit)="login(form)" class="form-desktop"> 
            <ion-grid class="login-grid">
              <ion-row class="login-row">
                <ion-col class="align-self-end" size-md="6" size-lg="6" size-xs="12">
                  <ion-row>
                    <ion-col class="align-self-center" size-md="6" size-lg="8" size-xs="12">
                      <div>
                        <ion-row>
                          <ion-col size-md="8" size-lg="10" size-xs="12">
                            <div class="login-title">
                              {{ 'titolo_login' | translate }}
                            </div>
                            <ion-item class="login-field">
                              <ion-input name="username" type="text" placeholder="{{ 'username' | translate }}" ngModel required></ion-input>
                            </ion-item>
                            <ion-item class="login-field">
                              <ion-input name="password" type="password" placeholder="{{ 'password' | translate }}" ngModel required></ion-input>
                            </ion-item>
                          </ion-col>
                          <ion-col size-md="4" size-lg="2" size-xs="12">
                            <div class="row-download">
                              <ion-buttons (click)="login(form);" download tappable>
                                <ion-img src="../../../../assets/img/Group182.png"></ion-img>
                              </ion-buttons>
                            </div>
                          </ion-col>
                        </ion-row>
                      </div>
                    </ion-col>
                  </ion-row>
                  
                  <ion-row color="primary">
                    <div class="text-center" class="forgot">
                      <a (click)='reset()' tappable>{{ 'lost_password' | translate }}</a>
                    </div>
                  </ion-row>
                  <ion-row>
                    <ion-label class="label-border-desktop" style="margin-top: 8px;">{{ 'lingua_selezionata' | translate }}</ion-label> 
                    <ion-select placeholder="{{linguaSel}}" (ionChange)="cambiaLingua()" interface="popover" title="{{ 'seleziona_lingua' | translate }}"> 
                      <ion-select-option *ngFor="let lingua of lingue; let i=index;" [value]="lingua.key" [selected]="i === 0">{{lingua.value}}</ion-select-option>
                    </ion-select>
                  </ion-row>
                </ion-col>
                <ion-col class="desktop-bcall-col" align-self-end size-md="6" size-lg="5" size-xs="12">
                    <div class="desktop-bcall">
                      <div class="bcall-title">
                        {{ 'bcall_title' | translate }}
                      </div>
                      <div>
                        <a (click)='redirectBusiness()' tappable class="bcall-content">
                          {{ 'bcall_content' | translate }}
                        </a>
                      </div>
                      <ion-img src="../../../../assets/img/Line1.png"></ion-img>
                    </div>
                </ion-col>
              </ion-row>
            </ion-grid>
          </form>
    </ion-footer>
  </div>
</div>