<div class="container-fluid p-0">
    <div class="row g-0">
        <div class="col-lg-4">
            <div class="auth-content p-4 d-flex align-items-center min-vh-100">
                <div class="w-100">
                    <div class="loading-shade" *ngIf="isLoading">
                        <mat-spinner></mat-spinner>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col-lg-9">
                            <div>
                                <div class="text-center">
                                    <div>
                                        <a class="logo-full"><img *ngIf="logoImage" [src]="logoImage"
                                                alt="logo-full"></a>
                                        <a class="logo-full"><img *ngIf="!logoImage" src="assets/images/logo.png"
                                                alt="logo-full"></a>
                                    </div>

                                    <h4 class="font-20 mt-4"> {{'RESET_PASSWORD' | translate}}</h4>
                                    <p class="text-muted">{{'ENTER_YOUR_PASSWORD_AND_CONFIRM_PASSWORD' | translate}}
                                    </p>
                                </div>

                                <div class="p-2 mt-5">
                                    <form [formGroup]="resetPasswordForm" class="login100-form validate-form">
                                        <div class="col-md-12">
                                            <div class="form-group mb-3">
                                                <label>{{'EMAIL' | translate}}</label>
                                                <input [attr.disabled]="true" formControlName="userName"
                                                    class="form-control mt-2" type="email">
                                            </div>
                                        </div>
                                        <div class="col-md-12 mb-3">
                                            <div class="form-group">
                                                <label>{{'PASSWORD' | translate}}</label>
                                                <input autocomplete="new-password" formControlName="password"
                                                    class="form-control mt-2" 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>
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>{{'CONFIRM_PASSWORD' | translate}}</label>
                                                <input autocomplete="new-password" formControlName="confirmPassword"
                                                    class="form-control mt-2" 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>

                                        <div class="container-login100-form-btn mt-4">
                                            <button mat-flat-button color="primary" class="login100-form-btn btn-sm"
                                                type="submit" (click)="resetPassword()">
                                                {{'RESET_PASSWORD' | translate}}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="auth-bg">
                <div *ngIf="bannerImage" class="bg-overlay" style='background-image: url({{bannerImage}});'></div>
                <div *ngIf="!bannerImage" class="bg-overlay"
                    style='background-image: url("assets/images/login-image.png");'>
                </div>
            </div>
        </div>
    </div>