<ion-header>
  <title>2p2</title>
</ion-header>

<ion-content>
  <div class="no-image" fullscreen>
    <div class="contenitore-business">
      <ion-grid>
        <ion-row color="primary" justify-content-center>
          <ion-col align-self-center size-md="6" size-lg="5">
            <ion-toolbar class="business-toolbar">
              <ion-buttons (click)="back()" slot="start" title="{{ 'back_login' | translate }}">
                <ion-icon name="arrow-round-back" color="#2b94d1" class="back" tappable></ion-icon>
                <!--<ion-icon name="arrow-dropleft-circle" color="#2b94d1" class="back"></ion-icon>-->
              </ion-buttons>
              <ion-title class="logo-piccolo">
                  <img src="assets/icon/2p2-logo-color.svg">
              </ion-title>
            </ion-toolbar>
          </ion-col>
        </ion-row>
      </ion-grid>
      <div class="messaggio">
        {{ 'prenota' | translate }}<br /><span class="blu">{{ 'business_call' | translate }}</span>
      </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="form">
                <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="item-no-border testo-form">
                  <ion-label class="testo-form" text-wrap>
                    {{ 'testo_libero' | translate }}
                  </ion-label>
                </ion-item>
                <ion-textarea name="testo" placeholder="" [(ngModel)]="testo" (ionInput)="autosize()" id="textarea"></ion-textarea>
                <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" expand="block">{{ 'inviaM' | translate }}</ion-button>
              </div>
            </ion-col>
          </ion-row>
          <ion-row color="primary" justify-content-center>
            <div class="require">
              {{ 'campi_obbligatori' | translate }}
            </div>
            <!--<div text-center>
              <a (click)='reset()'>Pulisci Form</a>
            </div>-->
          </ion-row>
        </ion-grid>
      </form>
    </div>
  </div>
</ion-content>
