<div class="container login-container" fxLayout="row" fxLayoutAlign="center center">
  <form [formGroup]="form" fxFlex="30%" fxFlex.sm="50%" fxFlex.xs="90%">
      <mat-card>
          <mat-card-title>Jucundus</mat-card-title>
          <mat-card-subtitle>Reset your password</mat-card-subtitle>
          <mat-card-content>

              <mat-form-field class="full-width">
                  <input id="emailInput" matInput readonly disabled [value]="email">
              </mat-form-field>

              <mat-form-field class="full-width">
                <input id="passwordInput" matInput placeholder="New Password" formControlName="newPassword" [type]="hideNewPassword ? 'password' : 'text'" autocomplete="new-password">
                <mat-icon id="togglePasswordVisibility" matSuffix (click)="hideNewPassword = !hideNewPassword">
                  {{hideNewPassword ? 'visibility' : 'visibility_off'}}
                </mat-icon>
          
                <mat-error *ngIf="form.controls['newPassword'].hasError('required')">
                  Please enter a new password
                </mat-error>
              </mat-form-field>

              <mat-form-field class="full-width">
                <input id="passwordConfirmInput" matInput placeholder="New Password Confirmation" formControlName="newPasswordConfirm" [type]="hideNewPasswordConfirm ? 'password' : 'text'" autocomplete="new-password">
                <mat-icon id="togglePasswordConfirmVisibility" matSuffix (click)="hideNewPasswordConfirm = !hideNewPasswordConfirm">
                  {{hideNewPasswordConfirm ? 'visibility' : 'visibility_off'}}
                </mat-icon>
          
                <mat-error *ngIf="form.controls['newPasswordConfirm'].hasError('required')">
                  Please enter a your current password
                </mat-error>
              </mat-form-field>

          </mat-card-content>

          <mat-card-actions class="login-actions">
              <button id="submit" mat-raised-button color="primary" [disabled]="form.invalid || loading" (click)="resetPassword()">OK</button>
              <button id="cancel" mat-button (click)="cancel()">Back to Login</button>
          </mat-card-actions>

      </mat-card>

      <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
  </form>
</div>