<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 class="text-center logo-img mb-3">
                    <img [src]="logoUrl" alt="Logo"/>
                  </div>
                  <span class="login100-form-title">
                    {{ "LOGIN_TO_CONTINUE" | translate }}
                  </span>
                </div>
                <div class="p-2 mt-5">
                  <form [formGroup]="loginFormGroup" (submit)="onLoginSubmit()">
                    <div class="row">
                      <div class="col-md-12 col-sm-12 col-12">
                        <div class="form-group">
                          <label>{{ "EMAIL" | translate }}</label>
                          <input formControlName="userName" class="form-control" type="text" />
                          <div *ngIf="
                              loginFormGroup.get('userName').touched &&
                              loginFormGroup.get('userName').errors
                            " class="k-tooltip-validation">
                            <div class="text-danger" *ngIf="
                                loginFormGroup.get('userName').errors?.required
                              ">
                              {{ "EMAIL_IS_REQUIRED" | translate }}
                            </div>
                            <div class="text-danger" *ngIf="
                                loginFormGroup.get('userName').errors?.email
                              ">
                              {{ "PLEASE_ENTER_VALID_EMAIL" | translate }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12 col-sm-12 col-12">
                        <div class="form-group">
                          <label>{{ "PASSWORD" | translate }}</label>
                          <input type="password" formControlName="password" class="form-control" type="password" />
                          <div *ngIf="
                              loginFormGroup.get('password').touched &&
                              loginFormGroup.get('password').errors?.required
                            " class="k-tooltip-validation">
                            <div class="text-danger" *ngIf="
                                loginFormGroup.get('password').errors?.required
                              ">
                              {{ "PASSWORD_IS_REQUIRED" | translate }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-12 col-sm-6 col-12">
                        <button type="submit" class="btn btn-success btn-sm mt-3" style="width: 100%;"
                          [disabled]="!loginFormGroup.valid">
                          {{ "LOGIN" | translate }}
                        </button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="auth-bg">
        <div class="bg-overlay"></div>
      </div>
    </div>
  </div>
</div>