<div class="row">
    <div class="small-12 medium-5 large-4 medium-centered column">
	    <div class="signin-form-adj" >
			<img class="img-logo logo-adj" src="logo.png" />
	    </div>
		<div *ngIf="activeForm == 'signInForm'" >
			<ng-container *ngTemplateOutlet="signInForm"></ng-container>
		</div>
		<div  *ngIf="activeForm == 'verifyForm'" >
			<ng-container *ngTemplateOutlet="verifyForm"></ng-container>
		</div>
		<div  *ngIf="activeForm == 'changePassForm'" >
			<ng-container *ngTemplateOutlet="changePassForm"></ng-container>
		</div>
		<div class="successForm"  *ngIf="activeForm == 'successForm'" >
		<span>Password change successfully</span>	
		</div>
    </div>
</div>

<ng-template #signInForm >
	<div class="signin-form">
	    <h4>Login to continue</h4>   
	    <form #signin="ngForm" (ngSubmit)="login(signin);" novalidate autocomplete="off">
			<md-input-container class="username-input-container" [hideRequiredMarker] = "true">
		 	     <input mdInput class="username-input" placeholder="User Name" required name="username" 
		 	     #username="ngModel" [(ngModel)]="_username" (keydown)="clearTimer();"  type = 'text' 
		 	     #usernameElem (focus) = "scrollIntoView(usernameElem);" />
			     <md-error *ngIf="username.errors && username.dirty" class="">User Name required</md-error> 
    		</md-input-container>
    		<md-input-container class="password-input-container" [hideRequiredMarker] = "true">
			     <input mdInput class="username-input" placeholder="Password" required name="password" 
			     #password="ngModel" [(ngModel)]="_password" (keydown)="clearTimer();" type = 'password' 
			     #passwordElem (focus) = "scrollIntoView(passwordElem);" /> 
			     <md-error *ngIf="password.errors && password.dirty" class="">Password required</md-error> 
    		</md-input-container>
		    <md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error> 
		    <a md-button class="forgot-password" (click)="forgot(signin);">Forgot Password? </a>
			<button md-button class="signin-button" type="submit"  [disabled]="!signin.form.valid">Login</button>
    	</form>
		<button md-button class="register-button" (click)="register();">Don't have an account ? Register here</button>
		 <md-progress-bar *ngIf="statusPending"
	          class="signin-progress-bar"
	          [color]="'primary'"
	          [mode]="'indeterminate'"
	          [value]="50">
	     </md-progress-bar>
    </div>
</ng-template>

<ng-template #verifyForm >
	<div class="verifyForm-form">
	    <h4>Password Reset</h4>   
	    <form #verifyForm="ngForm" (ngSubmit)="verify(verifyForm);" novalidate autocomplete="off">
			<md-input-container class="username-input-container" [hideRequiredMarker] = "true">
		 	     <input mdInput class="username-input" placeholder="Verification Code" required name="verifycode" 
		 	     #verifycode="ngModel" [(ngModel)]="_verifycode" (keydown)="clearTimer();"  type = 'text' 
		 	     #verifycodeElem (focus) = "scrollIntoView(verifycodeElem);" />
			     <md-error *ngIf="verifycode.errors && verifycode.dirty" class="">Verification Code required</md-error> 
    		</md-input-container>
    		<md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error> 
			<button md-button class="signin-button" type="submit"  [disabled]="!verifyForm.form.valid">Verify</button>
    	</form>
		<button md-button class="register-button" [disabled]="verifying" (click)="forgot(verifyForm);">
			{{verifying ? 'Pending ' + vCounter + ' ...': 'Resend Code'}}
		</button>
		<md-progress-bar *ngIf="statusPending"
	          class="signin-progress-bar"
	          [color]="'primary'"
	          [mode]="'indeterminate'"
	          [value]="50">
	     </md-progress-bar>
    </div>
</ng-template>



<!-- <ng-template #changePassForm > -->
<!-- 	<div class="changePass-form"> -->
<!-- 	    <h4>Change Password</h4>    -->
<!-- 	    <form #changePass="ngForm" (ngSubmit)="changePassword(changePass);" novalidate autocomplete="off"> -->
<!-- 			<md-input-container class="password-input-container" [hideRequiredMarker] = "true"> -->
<!-- 			     <input mdInput class="username-input" placeholder="New Password" required name="npassword" [(ngModel)]="_npassword" #npassword="ngModel" (keydown)="clearTimer();" type = 'password'  -->
<!-- 			     #npasswordElem (focus) = "scrollIntoView(npasswordElem);" />  -->
<!-- 			     <md-error *ngIf="npassword.errors && npassword.dirty" class="">Enter your password</md-error>  -->
<!--     		</md-input-container> -->
<!--     		<md-input-container class="password-input-container" [hideRequiredMarker] = "true"> -->
<!-- 			     <input mdInput class="username-input" placeholder="Confirm Password" required name="confirm_password" [(ngModel)]="_confirm_password" #confirm_password="ngModel" (keydown)="clearTimer();" type = 'password'  -->
<!-- 			     #confirm_passwordElem (focus) = "scrollIntoView(confirm_passwordElem);" />  -->
<!-- 			     <md-error *ngIf="confirm_password.errors && confirm_password.dirty" class="">Enter your password again</md-error>  -->
<!--     		</md-input-container> -->
<!--     		<md-error class="statusError" *ngIf="statusErrorMsg">{{statusErrorMsg}}</md-error>  -->
<!-- 			<button md-button class="signin-button" type="submit"  [disabled]="!changePass.form.valid">Change Password</button> -->
<!--     	</form> -->
<!-- 		 <md-progress-bar *ngIf="statusPending" -->
<!-- 	          class="signin-progress-bar" -->
<!-- 	          [color]="'primary'" -->
<!-- 	          [mode]="'indeterminate'" -->
<!-- 	          [value]="50"> -->
<!-- 	     </md-progress-bar> -->
<!--     </div> -->
<!-- </ng-template> -->
 <ng-template #changePassForm >
 <change-password></change-password>
 </ng-template>








