<div class="d-flex">
    <h2 mat-dialog-title class="dialog-title">{{'CHANGE_PASSWORD' | translate}}</h2>
    <button mat-icon-button class="ms-auto" (click)="onNoClick()">
        <mat-icon class="close-icon" color="warn">close</mat-icon>
    </button>
</div>

<mat-dialog-content>
    <form [formGroup]="changePasswordForm">
        <div class="col-md-12">
            <div class="form-group">
                <label>{{'EMAIL' | translate}}</label>
                <input formControlName="email" class="form-control" type="email">
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <label>{{'CURRENT_PASSWORD' | translate}}</label>
                <input autocomplete="new-password" formControlName="oldPasswordPassword" class="form-control"
                    type="password">
                <div class="text-danger"
                    *ngIf="changePasswordForm.get('oldPasswordPassword').touched && changePasswordForm.get('oldPasswordPassword').errors">
                    <div *ngIf="changePasswordForm.get('oldPasswordPassword').errors?.required">
                        {{'CURRENT_PASSWORD_IS_REQUIRED' | translate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <label>{{'NEW_PASSWORD' | translate}}</label>
                <input autocomplete="new-password" formControlName="password" class="form-control" type="password">
                <div class="text-danger"
                    *ngIf="changePasswordForm.get('password').touched && changePasswordForm.get('password').errors">
                    <div *ngIf="changePasswordForm.get('password').errors?.required">
                        {{'PASSWORD_IS_REQUIRED' | translate}}
                    </div>
                    <div *ngIf="changePasswordForm.get('password').errors?.minlength">
                        {{'YOU_HAVE_TO_ENTER_AT_LEAST_DIGIT' | translate}}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <label>{{'CONFIRM_PASSWORD' | translate}}</label>
                <input autocomplete="new-password" formControlName="confirmPassword" class="form-control"
                    type="password">
                <div class="text-danger"
                    *ngIf="changePasswordForm.get('confirmPassword').touched && changePasswordForm.get('confirmPassword').errors">
                    <div *ngIf="changePasswordForm.get('confirmPassword').errors?.required">
                        {{'CONFIRM_PASSWORD_IS_REQUIRED' | translate}}
                    </div>
                </div>
                <div class="text-danger"
                    *ngIf="changePasswordForm.get('confirmPassword').touched && changePasswordForm.hasError('notSame')">
                    {{'PASSWORDS_DO_NOT_MATCH' | translate}}
                </div>
            </div>
        </div>
        <div class="col-md-12 my-2">
            <button class="btn btn-success btn-sm me-2" (click)="changePassword()">
                <i-feather name="save" class="small-icon"></i-feather> {{'SAVE' | translate}}</button>
            <button class="btn btn-danger btn-sm" (click)="onNoClick()">
                <i-feather name="x-circle" class="small-icon"></i-feather> {{'CANCEL' | translate}}</button>
        </div>
    </form>
</mat-dialog-content>