<div class="form-group">
  <button
    class="btn btn-default"
    type="button"
    (click)="toggleChangePassword()"
  >
    <ng-container *ngIf="!changePassword">
      {{ 'Change password' | translate }}
    </ng-container>
    <ng-container *ngIf="changePassword">
      {{ 'Cancel password change' | translate }}
    </ng-container>
  </button>
</div>

<div
  class="row content-flex-50"
  *ngIf="changePassword"
>
  <div class="col-6">
    <c8y-form-group>
      <label
        for="newPassword"
        translate
      >
        Password
      </label>
      <c8y-password-input
        name="newPassword"
        required
        [id]="'newPassword'"
        #newPassword="ngModel"
        [(ngModel)]="model.newPassword"
        (change)="newPasswordChanged()"
        (input)="newPasswordConfirm.control.updateValueAndValidity()"
        c8yDefaultValidation="password"
        [autocomplete]="'new-password'"
      ></c8y-password-input>
    </c8y-form-group>

    <c8y-form-group>
      <label
        for="newConfirmPassword"
        translate
      >
        Confirm password
      </label>
      <c8y-password-input
        name="newPasswordConfirm"
        required
        [id]="'newConfirmPassword'"
        #newPasswordConfirm="ngModel"
        [(ngModel)]="model.newPasswordConfirm"
        passwordConfirm="newPassword"
        [autocomplete]="'new-password'"
      ></c8y-password-input>
    </c8y-form-group>
  </div>
  <div class="col-6">
    <c8y-password-check-list
      [password]="model.newPassword"
      [strengthEnforced]="passwordEnforced"
      (onRequirementsFulfilled)="updateValidity($event)"
    ></c8y-password-check-list>
  </div>
</div>