<form [formGroup]="passwordFormGroup">
  <div class="password-form" fxLayout="row" fxLayoutGap="2rem" fxLayoutAlign="start start">
    <!--Old password-->
    <nb-form-field class="password-form-field">
      <label for="oldPassword" class="label">
        {{'profile.password.old' | translate}}
      </label>
      <input formControlName="oldPassword"
             type="{{getInputType('oldPassword')}}" required
             id="oldPassword" nbInput
             class="form-field"
             [status]="passwordFormGroup.get('oldPassword').dirty ? (passwordFormGroup.get('oldPassword').invalid  ? 'danger' : 'basic') : 'basic'"
             placeholder="{{'******'}}">
      <button nbSuffix nbButton ghost class="form-field-button" (click)="toggleShowOldPassword()" [disabled]="passwordFormGroup.get('oldPassword').disabled">
        <fa-icon [icon]="showOldPassword ? fa.faEye : fa.faEyeSlash"></fa-icon>
      </button>
      <ng-container *ngIf="oldPasswordCtrl.dirty">
              <span class="error-text"
                    *ngIf="oldPasswordCtrl.hasError('required')">
                {{'profile.password.validationMessage.passwordRequired' | translate}}
              </span>
      </ng-container>
    </nb-form-field>
    <div fxLayout="column" fxLayoutGap="2rem">
      <!--New password-->
      <nb-form-field class="password-form-field">
        <label for="newPassword" class="label">
          {{'profile.password.new' | translate}}
        </label>
        <input formControlName="newPassword"
               type="{{getInputType('newPassword')}}" required
               id="newPassword" nbInput
               class="form-field"
               [status]="passwordFormGroup.get('newPassword').dirty ? (passwordFormGroup.get('newPassword').invalid  ? 'danger' : 'basic') : 'basic'"
               placeholder="{{'******'}}">
        <button nbSuffix nbButton ghost class="form-field-button" (click)="toggleShowNewPasswords()" [disabled]="passwordFormGroup.get('newPassword').disabled">
          <fa-icon [icon]="showNewPasswords ? fa.faEye : fa.faEyeSlash"></fa-icon>
        </button>
        <ng-container *ngIf="newPasswordCtrl.dirty">
              <span class="error-text"
                    *ngIf="newPasswordCtrl.hasError('required')">
                {{'profile.password.validationMessage.passwordRequired' | translate}}
              </span>
        </ng-container>
      </nb-form-field>
      <!--Confirm new password-->
      <nb-form-field class="password-form-field">
        <label for="confirmNewPassword" class="label">
          {{'profile.password.confirmNew' | translate}}
        </label>
        <input formControlName="confirmNewPassword"
               type="{{getInputType('confirmNewPassword')}}" required
               id="confirmNewPassword" nbInput
               class="form-field"
               [status]="passwordFormGroup.get('confirmNewPassword').dirty ? (passwordFormGroup.get('confirmNewPassword').invalid  ? 'danger' : 'basic') : 'basic'"
               placeholder="{{'******'}}">
        <ng-container *ngIf="confirmNewPasswordCtrl.dirty">
              <span class="error-text"
                    *ngIf="confirmNewPasswordCtrl.hasError('required')">
                {{'profile.password.validationMessage.passwordRequired' | translate}}
              </span>
        </ng-container>
      </nb-form-field>
    </div>
  </div>
</form>
