<ion-header class="header-subpage" no-border>
  <ion-toolbar>
    <ion-title class="titolo-sezione-head">{{ 'change_password' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

  
  <ion-content>
    <div class="contenitore-home">
        <div class="central-home">
    <form #form="ngForm" (ngSubmit)="change(form)" [formGroup]="matching_passwords_group">
      <ion-grid>
        <ion-row color="primary" justify-content-center>
            <ion-col>
            <div padding>
              <ion-item>
                <ion-input formControlName="oldpassword" type="password" placeholder="{{ 'old_pwd' | translate }}" ngModel required></ion-input>
              </ion-item>
              <ion-item>
                <ion-input formControlName="newpassword" type="password" placeholder="{{ 'new_pwd' | translate }}" ngModel required></ion-input>
              </ion-item>
              <ion-item>
                <ion-input formControlName="newpasswordbis" type="password" placeholder="{{ 'repeat_new_pwd' | translate }}" ngModel required></ion-input>
              </ion-item>
            </div>
            <div padding>
              <ion-button size="large" type="submit" [disabled]="form.invalid" expand="block" class="form-button giallo">{{ 'change_password' | 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.newpassword">
              <div class="error-message" *ngIf="matching_passwords_group.get('newpassword').hasError(validation.type) && (matching_passwords_group.get('newpassword').dirty 
              || matching_passwords_group.get('newpassword').touched)">
                {{ validation.message }}
              </div>
            </ng-container>
            <ng-container *ngFor="let validation of validation_messages.newpasswordbis">
              <div class="error-message" *ngIf="matching_passwords_group.get('newpasswordbis').hasError(validation.type) && (matching_passwords_group.get('newpasswordbis').dirty 
              || matching_passwords_group.get('newpasswordbis').touched)">
                {{ validation.message }}
              </div>
            </ng-container>
            <ng-container *ngFor="let validation of validation_messages.newpasswordbis">
              <div class="error-message" *ngIf="matching_passwords_group.hasError('areEqual')">
                {{ validation.message }}
              </div>
            </ng-container>
          </div>
        </ion-row>
      </ion-grid>
    </form>
    </div>
    </div>
  </ion-content>