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

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

    <c8y-form-group>
      <label for="newConfirmPassword" translate>Confirm password</label>
      <input
        id="newConfirmPassword"
        name="newPasswordConfirm"
        type="password"
        #newPasswordConfirm="ngModel"
        class="form-control"
        [(ngModel)]="model.newPasswordConfirm"
        required
        passwordConfirm="newPassword"
        autocomplete="new-password"
      />
    </c8y-form-group>
  </div>
  <div class="col-5">
    <c8y-password-strength
      [password]="model.newPassword"
      (strength)="model.strength = $event"
    ></c8y-password-strength>

    <c8y-password-check-list
      class="m-t-32"
      [password]="model.newPassword"
      [hidden]="!passwordEnforced"
    ></c8y-password-check-list>
  </div>
</div>