<h1 class="heading" *ngIf="!registrationSuccess">Login</h1>
<div fxLayout="row" fxLayoutAlign="center start" fxLayoutWrap.lt-md ngClass.lt-md="lt-md">
    <div fxFlex="100" fxFlex.gt-sm="730px" *ngIf="!registrationSuccess">
        <md-card color="default" class="mat-elevation-z0">
            <md-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>
                    <md-input-container class="full-width-input">
                        <input mdInput placeholder="User name" [(ngModel)]="user.userName" [type]="'text'" required/>
                    </md-input-container>
                    <md-input-container class="full-width-input">
                        <input mdInput placeholder="Password" [(ngModel)]="user.password" [type]="'password'" required/>
                    </md-input-container>
                    <span class="link-button" fxFlexAlign="start">{{'[login.forgot password]'|translate}}</span>
                    <md-checkbox color="primary">Remember me on this computer</md-checkbox>
                    <button md-button color="primary"  (click)="login($event)">Sing in securely</button>
                </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>
            </md-card-content>
        </md-card>
    </div>
    <!--div fxFlex.lt-md="100" fxFlexOffset.gt-sm="28px" class="general-info" ngClass.gt-sm="gt-sm">
        <md-card color="primary" class="mat-elevation-z0">
            <md-list>
               <md-list-item fxLayour="row" ><md-icon color="primary">local_phone</md-icon>&nbsp;<span [innerHTML]="'[help.info.item.1]'|translate"></span></md-list-item>
                <md-divider></md-divider>
               <md-list-item fxLayour="row" ><md-icon color="primary">verified_user</md-icon>&nbsp;<span>{{'[help.info.item.2]'|translate}}</span></md-list-item>
           </md-list>
       </md-card>
    </div-->
</div>
