<div>
  <div class="col-md-11 mx-auto">
    <div class="row">
      <div class="page-title-box d-sm-flex align-items-center pt-2 justify-content-between sticky-top">
        <div class="col-xl-11"></div>
        <div class="col-xl-1 mt-2">
          <div class="page-title-right float-end mx-3">
            <ng-select class="form-select" [formControl]="currentLanguage" [items]="languageOptions" bindLabel="label"
              bindValue="value" [clearable]="false" [searchable]="false" style="width: 100px;" (change)="onLangChange()">
            </ng-select>

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

  <div class="auth-page d-flex align-items-center">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 col-xl-3-4">
          <div class="card">
            <div class="bg-primary bg-soft text-center py-3 mt-2">
              <img src="assets/images/aConnect-new.png" class="img-fluid mb-2" height="200" width="250" alt="Logo">
            </div>
            <!-- <h2 class="text-center fw-semibold my-3">
              aConnect
            </h2> -->
            <div class="card-body">
              <form [formGroup]="loginForm" class="form-horizontal">
                <div class="mb-3">
                  <label for="USER_ID" class="form-label">{{"userId" | translate}}</label>
                  <div class="input-group auth-pass-inputgroup">
                    <input type="text" class="form-control" id="USER_ID" formControlName="USER_ID">
                  </div>
                  <div *ngIf="loginForm.get('USER_ID')?.invalid && loginForm.get('USER_ID')?.touched" class="text-danger">
                    <small *ngIf="loginForm.get('USER_ID')?.errors?.['required']">{{"userNameRequired" | translate}}</small>
                  </div>
                </div>
                <div class="mb-3">
                  <label for="PASSWORD" class="form-label">{{"password" | translate}}</label>
                  <div class="input-group auth-pass-inputgroup">
                    <input type="{{passwordType}}" class="form-control" id="PASSWORD" formControlName="PASSWORD" aria-label="Password" autocomplete="current-password">
                    <app-password-hide-show [showPassword]="true" (onEyeClick)="togglePasswordType()"></app-password-hide-show>
                  </div>
                  <div *ngIf="loginForm.get('PASSWORD')?.invalid && loginForm.get('PASSWORD')?.touched" class="text-danger">
                    <small *ngIf="loginForm.get('PASSWORD')?.errors?.['required']">{{"PasswordRequired" | translate}}</small>
                  </div>
                </div>
                <div class="mt-3 d-grid">
                  <button class="btn btn-primary waves-effect waves-light" type="button" (click)="login()" [disabled]="loginForm.invalid">{{"login" | translate}}</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row fixed-bottom">
    <div class="col-md-12 float-left">
      <p class="Copyright-text"><span class="VersionNumber">{{ versionNumber }} {{ buildDate }}</span></p>
    </div>
  </div>
</div>