<app-form-page>

  <form [formGroup]="formGroup" (ngSubmit)="submit()">

    <h1>Inscription</h1>

    <p>
      Bienvenue ! Procédons à ton inscription sur l'espace lycéens.
    </p>

    <!-- First name -->
    <mat-form-field class="full-width">
      <input matInput type="text" formControlName="firstName" placeholder="Prénom" required>
    </mat-form-field>

    <!-- Last name -->
    <mat-form-field class="full-width">
      <input matInput type="text" formControlName="lastName" placeholder="Nom" required>
    </mat-form-field>

      <!--Date of birth-->
      <mat-form-field class="full-width">
        <input matInput type="date" formControlName="dateOfBirth" placeholder="Date de naissance" required>
      </mat-form-field>

    <!-- Email -->
    <mat-form-field class="full-width">
      <input matInput type="email" formControlName="email" placeholder="Adresse email" onkeyup="this.value = this.value.toLowerCase();" required>
      <mat-hint>
        Elle te servira d'identifiant de connexion.
      </mat-hint>
    </mat-form-field>



    <mat-form-field class="full-width">
      <input matInput type="tel" minlength="10" maxlength="10" formControlName="phoneNumber" placeholder="Numéro de téléphone" required>
      <mat-hint>
        Il nous permettra de te contacter en cas de nécessité.
      </mat-hint>
    </mat-form-field>


    <p>
      Il ne te reste plus qu'à choisir un mot de passe. :-)
    </p>
    
    <!-- Password -->
    <mat-form-field class="full-width">
      <input matInput type="password"  minlength="8" minlength="8" formControlName="password" placeholder="Mot de passe" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" required>
      <mat-hint>
        Il faut 8 caractères avec au moins : une majuscule, une minuscule, et un chiffre.      </mat-hint>
    </mat-form-field>
    <!-- Confirm password -->
    <mat-form-field class="full-width">
      <input matInput type="password" formControlName="passwordConfirm" placeholder="Confirmer le mot de passe"
        [errorStateMatcher]="matcher">
      <mat-error *ngIf="formGroup.hasError('passwordsDifferent')">
        Les mots de passe doivent être identiques.
      </mat-error>
    </mat-form-field>

    <div class="text-center">
      <button mat-raised-button color="primary" [disabled]="!formGroup.valid || loading">
        Suivant
        <app-load-spinner *ngIf="loading" [block]="false"></app-load-spinner>
      </button>
    </div>
    <p class="text-center">{{error}}</p>


    <p class="text-center">
      J'ai déjà un compte ! <a routerLink="/connexion">Me connecter</a>
    </p>
  </form>
</app-form-page>