<form #f="ngForm" (ngSubmit)="onSubmit(f)" name="loginForm" novalidate>
  <h1 class="heading" *ngIf="!registrationSuccess">Login</h1>
  <div fxLayout="row" fxLayoutAlign="center start" fxLayoutWrap.lt-md ngClass.lt-md="lt-mat">
    <div fxFlex="100" fxFlex.gt-sm="730px" *ngIf="!registrationSuccess">
      <mat-card color="default" class="mat-elevation-z0">
        <mat-card-content fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between">
          <div fxLayout="column" fxFlex="50%" fxFlex.lt-md="100%" class="login-column" fxLayoutAlign="space-between">
            <span class="login-column-title">{{'[login.enter your account data]'|translate}}</span>
            <mat-input-container class="full-width-input">
              <input matInput knkEmail #email="ngModel" placeholder="User name" [(ngModel)]="user.email" [type]="'text'"
                     name="email" required/>
              <mat-error *ngIf="email.errors">{{getErrorMessage(email)}}</mat-error>
            </mat-input-container>
            <mat-input-container class="full-width-input">
              <input matInput placeholder="Password" #password="ngModel" [(ngModel)]="user.password" [type]="'password'"
                     name="password" required/>
              <mat-error *ngIf="password.errors">{{getErrorMessage(password)}}</mat-error>
            </mat-input-container>
            <span class="link-button" fxFlexAlign="start">{{'[login.forgot password]'|translate}}</span>
            <mat-checkbox color="accent">Remember me on this computer</mat-checkbox>
            <button mat-button color="accent" (click)="onSubmit(f)">Sing in securely</button>
            <mat-error style="font-size: 75%;" *ngIf="isLoginInvalid">{{errorMsg}}</mat-error>
          </div>
          <!--div fxLayout="column" fxFlex="200px" class="account-column">
              <span class="login-column-title">{{'[login.have not got account]'|translate}}</span>
              <span class="for-borrower">For prospective borrowers &mdash; <span class="emphasis">apply for a person loan</span></span>
              <span class="for-lender">For prospective lenders &mdash; <span class="emphasis">open an investment account</span>                    or find <span class="emphasis">more about lending</span></span>
          </div-->
          <!--div fxFlex="100" fxLayout="column" fxLayoutAlign="space-between start" class="security-section">
              <div class="security-label" fxLayout="row" fxLayoutAlign="center center">
                  security label
              </div>
              <span class="login-column-title">Security</span>
              <span>&lt;Details about security&gt;</span>
          </div-->
        </mat-card-content>
      </mat-card>
    </div>
    <!--div fxFlex.lt-md="100" fxFlexOffset.gt-sm="28px" class="general-info" ngClass.gt-sm="gt-sm">
        <mat-card color="primary" class="mat-elevation-z0">
            <mat-list>
               <mat-list-item fxLayour="row" ><mat-icon color="primary">local_phone</mat-icon>&nbsp;<span [innerHTML]="'[help.info.item.1]'|translate"></span></mat-list-item>
                <mat-divider></mat-divider>
               <mat-list-item fxLayour="row" ><mat-icon color="primary">verified_user</mat-icon>&nbsp;<span>{{'[help.info.item.2]'|translate}}</span></mat-list-item>
           </mat-list>
       </mat-card>
    </div-->
  </div>
</form>
