<div class="container-fluid p-0">
  <div class="row">
    <div class="col-12">
      <app-alert *ngIf="isAlert" class="alert-top" [alertType]="alertType"
        [alertErrorMessage]="alertMessage"></app-alert>
      <div class="login-card">
        <div>
          <div>
            <a class="logo" routerLink='/'>
              <img class="img-fluid for-light" src="assets/admin/images/logo/logo.png" alt="looginpage">
              <img class="img-fluid for-dark" src="assets/admin/images/logo/logo.png" alt="looginpage">
            </a>
          </div>
          <div class="login-main">
            <form class="theme-form" [formGroup]="loginForm">
              <h4>{{ 'login_lbl_sign_in_to_account' |translate}}</h4>
              <p>{{ 'login_lbl_enter_your_email_password_to_login' |translate}}</p>
              <div class="form-group">
                <label class="col-form-label">{{ 'lbl_email' |translate}}</label>
                <input class="form-control" type="email" required="" placeholder="Enter your email"
                  formControlName="email">
                <!-- <div *ngIf="loginForm.controls['email']!.touched && loginForm.controls['email'].errors!['required']"
                  class="text text-danger mt-1">
                  {{ 'message_lbl_email_is_required' |translate}}
                </div>
                <div *ngIf="loginForm.controls['email']!.touched && loginForm.controls['email'].errors!['email']"
                  class="text text-danger mt-1">
                  {{ 'message_lbl_invalid_email' |translate}}
                </div> -->
              </div>
              <div class="form-group">
                <label class="col-form-label">{{ 'lbl_password' |translate}}</label>
                <input class="form-control" [type]="show ? 'text' : 'password'" formControlName="password" required=""
                  placeholder="*********">
                <div class="show-hide" (click)="showPassword()" *ngIf="!show"><span class="show"></span></div>
                <div class="show-hide" (click)="showPassword()" *ngIf="show"><span class="Hide"></span></div>
                <!-- <div
                  *ngIf="loginForm.controls['password']!.touched && loginForm.controls['password'].errors!['required']"
                  class="text text-danger mt-1">
                  {{ 'message_lbl_password_is_required' |translate}}
                </div> -->
              </div>
              <div class="form-group mb-0">
                <div class="checkbox p-0">
                  <input id="checkbox1" type="checkbox" formControlName="isRememberMe">
                  <label class="text-muted" for="checkbox1">{{ 'message_lbl_remember_password' |translate}}</label>
                </div>
                <button class="btn btn-info btn-block" [class.loader--text]="showLoader"
                  [disabled]="!loginForm.valid || showLoader" (click)="login()" type="button"><span>{{ showLoader ? '' :
                    'login_lbl_login' |translate}}</span>
                </button>

              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>