<app-form-page>
    <form [formGroup]="formGroup" (ngSubmit)="submit()">
        <h2>Modifier mes données personnelles</h2>
        <p class="text-center">Informations personnelles</p>
        <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="firstName" placeholder="Prénom" required>
        </mat-form-field>
        <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="lastName" placeholder="Nom" required>
          </mat-form-field>
        
          <div class="form-group">
            <mat-form-field class="horizontal-display">
              <mat-label>Sexe</mat-label>
              <mat-select  formControlName="gender" required>
                <mat-option value="Homme">Homme</mat-option>
                <mat-option value="Femme" >Femme</mat-option>
                <mat-option value="Autre">Autre</mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field class="horizontal-display" >
              <mat-label>Nationalité</mat-label>
              <mat-select  formControlName="nationality" required>
                    <mat-option *ngFor="let nationality of possibleNationalities" [value]="nationality.name"> {{ nationality.name }}</mat-option>
                  </mat-select>
            </mat-form-field>
          </div>
          
          <p class="text-center">Adresse</p>
          <div class="form-group">
            <mat-form-field class="full-width address-input quarter-display">
              <input matInput type="text"  formControlName="addressNumber" placeholder="Numéro de rue" required>
            </mat-form-field>
            <mat-form-field class="full-width address-input">
              <input  matInput  type="text" formControlName="street" placeholder="Rue" required>
            </mat-form-field>
          </div>
          
          <div class="form-group">
            <mat-form-field class="full-width address-input quarter-display">
              <input matInput type="text" minlength="5" maxlength="5" formControlName="zipCode" placeholder="Code postal" required>
              <mat-error *ngIf="formGroup.controls['city'].hasError('pattern')">
                Vous devez rentrer un code postal correct
              </mat-error>
            </mat-form-field>
        
            <mat-form-field class="full-width address-input" >
              <input matInput   type="text" formControlName="city" placeholder="Ville" required>
            </mat-form-field>
          </div>
          <p class="text-center">Informations de contact</p>
          <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="personalPhone" placeholder="Téléphone personnel sous la forme '0623456789' (sans espaces ni tirets)" required>
          </mat-form-field>
          <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="parentsPhone" placeholder="Téléphone des parents  sous la forme '0623456789' (sans espaces ni tirets)" required>
          </mat-form-field>
    
          <mat-form-field class="full-width" >
            <input matInput   type="text" formControlName="parentsEmail" placeholder="Email des parents" required>
          </mat-form-field>
    
          <p class="text-center">Informations scolaires</p>
    
          <mat-form-field class="full-width" >
            <mat-label>Etablissement </mat-label>
            <mat-select  formControlName="school" required>
              <mat-option *ngFor="let school of possibleSchools" [value]="school.id">{{ school.name }}</mat-option>
            </mat-select>
          </mat-form-field>
          <div class="form-group">
            <mat-form-field class="horizontal-display">
              <mat-label>Classe</mat-label>
              <mat-select  formControlName="grade" required>
                <mat-option value="troisieme">Troisième</mat-option>
                <mat-option value="seconde">Seconde</mat-option>
                <mat-option value="premiere" >Première</mat-option>
                <mat-option value="terminale">Terminale</mat-option>
                <mat-option value="classe passerelle">Classe Passerelle</mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field class="horizontal-display horizontal-center">
              <mat-label>Voie</mat-label>
              <mat-select  formControlName="classType" [(value)]="classType" required>
                <mat-option value="General">General</mat-option>
                <mat-option value="Technologique">Technologique</mat-option>
                <mat-option value="Professionnelle">Professionnelle</mat-option>
              </mat-select>
            </mat-form-field>
            
            <mat-form-field class="horizontal-display"> 
              <mat-label>Boursier </mat-label>
              <mat-select  formControlName="scholarship" required>
                <mat-option *ngFor="let scholarship of possibleScholarships" [value]="scholarship.id">{{ scholarship.name }}</mat-option>
              </mat-select>
            </mat-form-field>
            
          </div>


          <mat-form-field class="full-width" >
            <mat-label>Enseignements de spécialité (entrer 'aucun' si jamais vous n'etes pas concerné) </mat-label>
            <mat-select  formControlName="specialTeaching" required >
              <mat-option *ngFor="let specialTeaching of setSpeciality()" [value]="specialTeaching.id">{{ specialTeaching.name }}</mat-option>
            </mat-select>
          </mat-form-field>
           
          
         
          <p class="text-center">Informations des responsables légaux</p>  
          <div class="form-group">
            <mat-form-field class="horizontal-display">
              <mat-label>Activité du responsable légal 2 </mat-label> 
              <mat-select  formControlName="motherActivity" required>
                <mat-option *ngFor="let activity of possibleParentsActivities" [value]="activity.id">{{ activity.name }}</mat-option>
              </mat-select>
            </mat-form-field>
      
            <mat-form-field class="horizontal-display">
              <mat-label>Activité du responsable légal 1 </mat-label>
              <mat-select  formControlName="fatherActivity" required>
                <mat-option *ngFor="let activity of possibleParentsActivities" [value]="activity.id">{{ activity.name }}</mat-option>
              </mat-select> 
            </mat-form-field>
          </div>
          
          <div class="form-group">
            <mat-form-field class="horizontal-display">
              <mat-label>Statut des responsables légaux </mat-label>
              <mat-select formControlName="parentsStatus" required >
                <mat-option *ngFor="let status of possibleParentsStatus" [value]="status.id">{{ status.name }}</mat-option>
              </mat-select>
            </mat-form-field>
      
            <mat-form-field class="horizontal-display" >
              <input matInput   type="number" formControlName="dependantsNumber" placeholder="Nombre de personnes à charge" required>
            </mat-form-field>
          </div>
          <p>
            <small>
              Données personnelles : nous utiliserons les données fournies pour assurer le contact avec toi et ta famille,
              équilibrer les participations aux activités organisées ainsi qu'à des fins d'aggrégation anonymisée
              (statistiques, demandes de subvention). Plus d'informations dans nos <a routerLink="/mentions-legales"
                target="_blank">mentions légales</a>.
            </small>
          </p>
      
          <p>
            J'accepte qu'OSER utilise mes données personnelles fournies ci-dessus ou dans le formulaire d'inscription
            administrative, dans le strict respect du cadre spécifié ci-dessus :
          </p>
      
          <mat-checkbox class="checkbox-field" formControlName="acceptedConditions" required >
            J'accepte cette utilisation
          </mat-checkbox>
        
          <div class="text-center">
            <button mat-raised-button color="primary" [disabled]="!formGroup.valid || loading">
              Modifier
              <app-load-spinner *ngIf="loading" [block]="false"></app-load-spinner>
            </button>
          </div>
          <p class="text-center">{{error}}</p>
          <p class="text-center post-edit-text">{{postEditMessage}}</p>
    </form>
</app-form-page>
<messages></messages>
<router-outlet></router-outlet>