<ion-header class="ion-no-border">
  <title>2p2</title>
</ion-header>

<div class="body-desktop">
  <ion-content *ngIf="!platform.is('desktop')">
    <div fullscreen>
      <div class="contenitore-business">
        <div class="background-blu bc-height">
          <ion-grid>
            <ion-row color="primary" justify-content-center>
              <ion-col align-self-center>
                <ion-toolbar class="business-toolbar">
                  <ion-buttons (click)="back()" slot="start" title="{{ 'back_login' | translate }}">
                    <ion-icon name="arrow-back-outline" color="#2b94d1" class="back-white" tappable></ion-icon>
                    <!--<ion-icon name="arrow-dropleft-circle" color="#2b94d1" class="back"></ion-icon>-->
                  </ion-buttons>
                  <img src="assets/img/LogoBianco.svg" class="immagine-piccola">
                </ion-toolbar>
              </ion-col>
            </ion-row>
          </ion-grid>
          <div class="messaggio-bianco">
            {{ 'prenota' | translate }}<br /><span class="bold">{{ 'business_call' | translate }}</span>
          </div>
        </div>
        <form #form="ngForm" (ngSubmit)="sendMail(form)"> 
          <ion-grid>
            <ion-row color="primary" justify-content-center>
              <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
                <div class="bc-call">
                  <ion-item class="input-business">
                    <ion-input name="nome" type="text" placeholder="{{ 'nome' | translate }} *" [(ngModel)]="nome" required></ion-input>
                  </ion-item>
                  <ion-item class="input-business">
                    <ion-input name="cognome" type="text" placeholder="{{ 'cognome' | translate }} *" [(ngModel)]="cognome" required></ion-input>
                  </ion-item>
                  <ion-item class="input-business">
                    <ion-input name="cellulare" type="text" placeholder="{{ 'cellulare' | translate }} *" [(ngModel)]="cellulare" required></ion-input>
                  </ion-item>
                  <ion-item class="input-business">
                    <ion-input name="email" type="text" placeholder="{{ 'indirizzo_email' | translate }} *" [(ngModel)]="email" required></ion-input> 
                  </ion-item>
                  <ion-item class="input-business">
                    <ion-input name="lingua" type="text" placeholder="{{ 'lingua' | translate }}" [(ngModel)]="lingua"></ion-input>
                  </ion-item>
                  <ion-item class="input-business">
                    <ion-textarea name="testo" placeholder="{{ 'bcall_messaggio' | translate }}" [(ngModel)]="testo" (ionInput)="autosize()" id="textarea"></ion-textarea>
                  </ion-item>
                  <ion-item class="input-check item-no-border" text-wrap>
                    <ion-row style="width: 100%">
                      <ion-col size="2" no-padding no-margin>
                        <ion-item no-padding no-margin no-lines class="item-no-border">
                          <ion-checkbox name="privacy" [(ngModel)]="privacy" class="check"> </ion-checkbox>
                        </ion-item>
                      </ion-col>
                      <ion-col size="10" no-padding no-margin>
                        <ion-item no-padding no-margin no-lines class="item-no-border">
                          <ion-label class="text-check" text-wrap>{{ 'preso_visione' | translate }} <a (click)="gotoPrivacy();" tappable>{{ 'privacy' | translate }}</a></ion-label>
                        </ion-item>
                      </ion-col>
                    </ion-row>
                  </ion-item>
                </div>
                <div class="accedi">
                  <ion-button size="large" type="submit" [disabled]="form.invalid" class="bc-invia" expand="block">
                      {{ 'inviaM' | translate }}
                  </ion-button>
                </div>
              </ion-col>
            </ion-row>
            <ion-row color="primary" justify-content-center>
              <div class="require text-check-desktop2">
                {{ 'campi_obbligatori' | translate }}
              </div>
              <!--<div text-center>
                <a (click)='reset()'>Pulisci Form</a>
              </div>-->
            </ion-row>
          </ion-grid>
        </form>
      </div>
    </div>
  </ion-content>
  <ion-grid class="transparent bc-grid" *ngIf="platform.is('desktop')">
    <ion-row class="transparent" justify-content-center>
      <ion-col align-self-center class="transparent">
        <div class="body-form body-img12">          
          <div>
            <div>
              <div class="contenitore-desktop">
                <div class="logo-grande2">
                  <ion-toolbar class="business-toolbar2">
                  <ion-buttons (click)="back()" slot="start" title="{{ 'back_login' | translate }}" class="back-button-desktop">
                    <ion-icon name="arrow-back-outline" color="#2b94d1" class="back" tappable></ion-icon>
                    <!--<ion-icon name="arrow-dropleft-circle" color="#2b94d1" class="back"></ion-icon>-->
                  </ion-buttons>
                  <ion-title class="bc-title2">
                    <img src="assets/icon/2p2-logo-color.svg" class="immagine-piccola" /> 
                  </ion-title>
                  </ion-toolbar>
                </div>                
              </div>
            </div>
            <div class="bc-title">
              {{ 'bcall_content' | translate }}
            </div>
            <form #form="ngForm" (ngSubmit)="sendMail(form)"> 
              <ion-grid class="bc-call">
                <ion-row class="">
                  <ion-col align-self-end size-md="6" size-lg="6" size-xs="12">
                    <ion-item class="input-business">
                      <ion-input name="nome" type="text" placeholder="{{ 'nome' | translate }} *" [(ngModel)]="nome" required></ion-input>
                    </ion-item>
                  </ion-col>
                  <ion-col align-self-end size-md="6" size-lg="6" size-xs="12">
                    <ion-item class="input-business">
                      <ion-input name="cognome" type="text" placeholder="{{ 'cognome' | translate }} *" [(ngModel)]="cognome" required></ion-input>
                    </ion-item>
                  </ion-col>
                </ion-row>
                <ion-row class="">
                  <ion-col align-self-end size-md="6" size-lg="6" size-xs="12">
                    <ion-item class="input-business">
                      <ion-input name="cellulare" type="text" placeholder="{{ 'cellulare' | translate }} *" [(ngModel)]="cellulare" required></ion-input>
                    </ion-item>
                  </ion-col>
                  <ion-col align-self-end size-md="6" size-lg="6" size-xs="12">
                    <ion-item class="input-business">
                      <ion-input name="email" type="text" placeholder="{{ 'indirizzo_email' | translate }} *" [(ngModel)]="email" required></ion-input> 
                    </ion-item>
                  </ion-col>
                </ion-row>
              </ion-grid>
              <ion-item class="input-business">
                <ion-input name="lingua" type="text" placeholder="{{ 'lingua' | translate }}" [(ngModel)]="lingua"></ion-input>
              </ion-item>
              <ion-item class="input-business">
                <ion-textarea name="testo" placeholder="{{ 'bcall_messaggio' | translate }}" [(ngModel)]="testo" (ionInput)="autosize()" id="textarea"></ion-textarea>
              </ion-item>
              <ion-item class="input-check item-no-border" text-wrap>
                <ion-row style="width: 100%">
                  <ion-col size="1" no-padding no-margin>
                    <ion-item no-padding no-margin no-lines class="item-no-border">
                      <ion-checkbox name="privacy" [(ngModel)]="privacy" class="check"> </ion-checkbox>
                    </ion-item>
                  </ion-col>
                  <ion-col size="11" no-padding no-margin>
                    <ion-item no-padding no-margin no-lines class="item-no-border check-desktop">
                      <ion-label class="text-check-desktop" text-wrap>{{ 'preso_visione' | translate }} <a (click)="gotoPrivacy();" tappable>{{ 'privacy' | translate }}</a></ion-label>
                    </ion-item>
                  </ion-col>
                </ion-row>
              </ion-item>
              <ion-grid>
                <ion-row>
                  <ion-col>
                    <div class="require text-check-desktop2">
                      {{ 'campi_obbligatori' | translate }}
                    </div>
                  </ion-col>
                  <ion-col>
                    <div class="accedi">
                      <ion-button type="submit" [disabled]="form.invalid" class="bc-invia">
                          {{ 'inviaM' | translate }}
                      </ion-button>
                    </div>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </form>
          </div>
        </div>
      </ion-col>
      <ion-col align-self-end size-md="6" size-lg="6" size-xs="12">
        <div class="body-blue2"></div>
        <div class="body-img22"></div>
      </ion-col>
    </ion-row>
  </ion-grid>
</div>
