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

<ion-content>
  <div class="background-blu rp-height" *ngIf="!platform.is('desktop')">
    <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">
      {{ 'registrazione' | translate }}
    </div>
  </div>
  <ion-grid class="transparent bc-grid">
    <ion-row class="transparent">
      <ion-col align-self-end size-md="6" size-lg="6" size-xs="12" class="transparent">
        <div class="body-form body-img12">
          <form #form="ngForm" (ngSubmit)="registra(form)" [formGroup]="matching_email_group">
            <ion-grid>
              <ion-row color="primary" justify-content-center>
                <ion-col align-self-center>
                  <ion-row class="margin-top" *ngIf="platform.is('desktop')">
                    <ion-buttons (click)="back()" title="{{ 'back_login' | translate }}" class="back-button-desktop back-button-desktop-reset">
                      <ion-icon name="arrow-back-outline" color="#232D4B" class="back" tappable></ion-icon>
                      
                    </ion-buttons>
                    <ion-title class="logo-piccolo">
                        <img src="assets/icon/2p2-logo-color.svg">
                    </ion-title>
                  </ion-row>
                  <div text-center *ngIf="platform.is('desktop')">
                    <h3>{{ 'registrazione' | translate }}</h3>
                  </div>
                  <div padding>
                    <ion-item>
                      <ion-input formControlName="nome" type="text" placeholder="{{ 'nome' | translate }}" ngModel required></ion-input>
                    </ion-item>
                    <ion-item>
                      <ion-input formControlName="cognome" type="text" placeholder="{{ 'cognome' | translate }}" ngModel required></ion-input>
                    </ion-item>
                    <ion-item>
                      <ion-input formControlName="email" type="email" placeholder="{{ 'email' | translate }}" ngModel required></ion-input>
                    </ion-item>
                    <ion-item>
                      <ion-input formControlName="cellulare" type="cellulare" placeholder="{{ 'cellulare' | translate }}" ngModel required></ion-input>
                    </ion-item>
                    <ion-item>
                      <ion-input formControlName="password" type="password" placeholder="{{ 'pwd' | translate }}" ngModel required></ion-input>
                    </ion-item>
                    <ion-item>
                      <ion-input formControlName="passwordbis" type="password" placeholder="{{ 'repeat_pwd' | translate }}" ngModel required></ion-input>
                    </ion-item>
                  </div>
                  <div padding>
                    <ion-button type="submit" [disabled]="form.invalid" class="bc-invia">{{ 'registrati' | translate }}</ion-button>
                  </div>
                </ion-col>
              </ion-row>
              <ion-row color="primary" justify-content-center>
                <div class="validation-errors" justify-content-center>
                  <ng-container *ngFor="let validation of validation_messages.email">
                    <div class="error-message" *ngIf="matching_email_group.get('email').hasError(validation.type) && (matching_email_group.get('email').dirty 
                    || matching_email_group.get('email').touched)">
                      {{ validation.message }}
                    </div>
                  </ng-container>
                </div>
              </ion-row>
            </ion-grid>
          </form>
        </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>
</ion-content>
