<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="login-container">
  <div fxLayout="row" fxFlex.gt-sm="35" fxLayoutAlign="center center">
    <mat-card fxLayout="row" fxFlex="45" fxLayoutAlign="center stretch">
      <div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign="stretch stretch">
        <div fxFlex="35" fxLayoutAlign="center center" class="bg-primary">
          <img src="assets/images/RTL-Horse-BY.svg" alt="RTL Logo" class="rtl-logo-svg">
        </div>
        <div fxFlex="65" fxLayout="column" fxLayoutAlign="center stretch" [ngClass]="{'padding-gap-large': screenSize === screenSizeEnum.XS}">
          <mat-card-header fxLayout="row" fxLayoutAlign="center center" class="page-title-container mt-2 p-0">
            <mat-card-title class="font-bold-500" [ngClass]="{'font-size-200': screenSize === screenSizeEnum.XS, 'font-size-300': screenSize !== screenSizeEnum.XS}">
              <span class="page-title">Welcome</span>
            </mat-card-title>
          </mat-card-header>
          <mat-card-content class="pb-2">
            <form #loginForm="ngForm" fxLayout="column" fxLayoutAlign="start space-between">
              <mat-form-field>
                <mat-label>Password</mat-label>
                <input autoFocus matInput id="password" name="password" tabindex="1" required [type]="flgShow ? 'text' : 'password'" [(ngModel)]="password">
                <button mat-icon-button matSuffix tabindex="2" type="button" [attr.aria-label]="'Hide password'" (click)="flgShow = !flgShow">
                  <mat-icon>{{flgShow ? 'visibility_off' : 'visibility'}}</mat-icon>
                </button>
                <mat-error *ngIf="!password">Password is required.</mat-error>
              </mat-form-field>
              <p *ngIf="loginErrorMessage !== ''" fxFlex="100" class="color-warn pre-wrap" fxLayoutAlign="start start">
                <mat-icon class="mr-1 icon-small">close</mat-icon>
                {{loginErrorMessage}}
              </p>
              <div fxLayout="row" fxFlex="100" fxLayoutAlign="end center" class="mt-2">
                <button class="mr-1 mb-2" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear</button>
                <button mat-flat-button color="primary" tabindex="3" type="submit" (click)="onLogin()">Login</button>
              </div> 
            </form>
          </mat-card-content>
        </div>
      </div>
    </mat-card>
  </div>
</div>
