<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="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">{{'FORGOTTEN_PASSWORD' | translate}}</h4>
                  <p class="text-muted">{{'ENTER_YOUR_EMAIL_TO_RESET_YOUR_PASSWORD' | translate}}</p>
                </div>

                <div class="p-2 mt-5">
                  <form [formGroup]="loginFormGroup" (ngSubmit)="onLoginSubmit()">
                    <div class="form-group  mb-4">
                      <input type="email" formControlName="email" class="form-control" id="email"
                        placeholder="{{'EMAIL' | translate}}">
                      <div *ngIf="loginFormGroup.get('email').touched && loginFormGroup.get('email').errors"
                        class="k-tooltip-validation">
                        <div class="text-danger" *ngIf="loginFormGroup.get('email').errors?.['required']">
                          {{'EMAIL_IS_REQUIRED' | translate}}
                        </div>
                        <div class="text-danger" *ngIf="loginFormGroup.get('email').errors?.['email']">
                          {{'PLEASE_ENTER_VALID_EMAIL' | translate}}
                        </div>
                      </div>
                    </div>
                    <div class="container-login100-form-btn">
                      <button mat-flat-button color="primary" class="login100-form-btn btn-sm" type="submit">
                        {{'RESET_MY_PASSWORD' | translate}}
                      </button>
                    </div>
                  </form>
                </div>
                <div class="mt-3 text-center">
                  <p> {{'WANT_TO_LOGIN_?' | translate}} <a routerLink="/login"
                      class="font-weight-medium text-primary">
                      {{'LOG_IN' | translate}} </a> </p>
                </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>