<h1 mat-dialog-title>{{'RESET_PASSWORD' | translate}}</h1>
<div mat-dialog-content>
    <form [formGroup]="resetPasswordForm">
        <div class="col-md-12 m-b-10">
            <label class="form-label">{{'EMAIL' | translate}}</label>
            <input formControlName="email" class="form-control" type="email">
        </div>
        <div class="col-md-12 m-b-10">
            <label class="form-label">{{'PASSWORD' | translate}}</label>
            <input autocomplete="new-password" formControlName="password" class="form-control" type="password">
            <div *ngIf="resetPasswordForm.get('password').touched && resetPasswordForm.get('password').errors">
                <div class="text-danger" *ngIf="resetPasswordForm.get('password').errors?.['required']">
                    {{'PASSWORD_IS_REQUIRED' | translate}}
                </div>
                <div class="text-danger" *ngIf="resetPasswordForm.get('password').errors?.['minlength']">
                    {{'YOU_HAVE_TO_ENTER_AT_LEAST_DIGIT' | translate}}
                </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
                    *ngIf="resetPasswordForm.get('confirmPassword').touched && resetPasswordForm.get('confirmPassword').errors">
                    <div class="text-danger" *ngIf="resetPasswordForm.get('confirmPassword').errors?.['required']">
                        {{'CONFIRM_PASSWORD_IS_REQUIRED' | translate}}
                    </div>
                </div>
                <div class="text-danger"
                    *ngIf="resetPasswordForm.get('confirmPassword').touched && resetPasswordForm.hasError('notSame')">
                    {{'PASSWORDS_DO_NOT_MATCH' | translate}}
                </div>
            </div>
        </div>
    </form>
</div>
<div mat-dialog-actions>
    <button class="btn btn-success btn-sm m-r-10" (click)="resetPassword()" cdkFocusInitial>
        <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>