<mat-card class="confirm-card mat-elevation-z setting-frame">
  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-card-title>{{ 'accounts.changePassword' | translate }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div fxFlex class="setting-tab">
      <ucap-account-change-password
        [loginId]="data.loginId"
        [phoneNumber]="data.phoneNumber"
        [encryptedLoginPw]="data.encryptedLoginPw"
        (changePassword)="onChangePassword($event)"
      ></ucap-account-change-password>
    </div>
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button
      mat-stroked-button
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
      {{ 'common.messages.cancel' | translate }}
    </button>
  </mat-card-actions>
</mat-card>
