<div class="demo-tab-content">
    <form class="signup-form">
        <div *ngIf="signupFirstStep">
            <mat-form-field class="example-full-width signup_email_page">
                <input matInput [formControl]="emailFormControl" [(ngModel)]="email" name="email">
                <mat-icon matSuffix *ngIf="!(emailFormControl.hasError('email') && !emailFormControl.hasError('required')) && (email != '')"><img class='email-check' src='{{imgUrl}}/assets/img/check-material.png'></mat-icon>
                <mat-placeholder>
                    <img src="{{imgUrl}}/assets/img/mail.png"> &nbsp; Email</mat-placeholder>
                <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
                    {{loginemailErrMsg}}
                </mat-error>
                <mat-error *ngIf="emailFormControl.hasError('required')">
                    Email is <strong>required</strong>
                </mat-error>
            </mat-form-field>
            <button type="button" class="btn btn_py_login btn-block center-always" (click)="suNextStep()" [disabled]="!email" style="font-family: inherit;">Next
                            </button>
        </div>
        <div *ngIf="!signupFirstStep">
            <div *ngIf="bnyregreq">
                <div class="signup_step2">
                    Welcome <br />
                    <div> <i class="fa fa-user-circle"></i>&nbsp;<span class="email_det">{{email}} </span><img class="img-responsive pull-right" src="{{imgUrl}}/assets/img/ion-ios-arrow-forward.png" alt="goBack" (click)="editEmailEntered()" />
                    </div>
                </div>
                <mat-form-field class="example-full-width" appearance="standard">
                    <input matInput type="text" [(ngModel)]="firstname" name="firstname">
                    <mat-placeholder>First Name
                        <mat-error *ngIf="firstNameError" class="error-msg"> {{firstNameErrMsg}} </mat-error>
                    </mat-placeholder>
                </mat-form-field>
                <mat-form-field class="example-full-width" appearance="standard">
                    <input matInput type="text" [(ngModel)]="lastname" name="lastname">
                    <mat-placeholder>Last Name
                        <mat-error *ngIf="lastNameError" class="error-msg"> {{lastNameErrMsg}} </mat-error>
                    </mat-placeholder>
                </mat-form-field>
                <mat-form-field class="example-full-width ">
                    <input matInput [formControl]="phoneFormControl" [(ngModel)]="phonenumber" name="phonenumber">
                    <mat-placeholder>Phone Number</mat-placeholder>
                    <mat-error *ngIf="!phoneFormControl.hasError('pattern')">
                        {{phoneErrMsg}}
                    </mat-error>
                    <mat-error *ngIf="phoneFormControl.hasError('required')">
                        Phone Number is <strong>required</strong>
                    </mat-error>
                    <!-- <ngx-intl-tel-input [(value)]="phonenumber" matInput [preferredCountries]="preferredCountries"></ngx-intl-tel-input> -->
                </mat-form-field>
                <mat-form-field class="example-full-width">
                    <input matInput type="password" [type]="hide ? 'password' : 'text'" [(ngModel)]="password" name="password">
                    <mat-hint>Minimum 6 characters</mat-hint>
                    <mat-placeholder>
                        <img src="{{imgUrl}}/assets/img/password.png"> &nbsp; Password</mat-placeholder>
                    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
                    <mat-error *ngIf="isPwdError" class="error-msg"> {{PwdErrMsg}} </mat-error>
                    <span *ngIf="isPwdError" class="error-msg"> {{PwdErrMsg}} </span>
                </mat-form-field>
                <mat-form-field class="example-full-width">
                    <input matInput type="password" [(ngModel)]="confirm_password" name="confirm_password" (keyup.enter)="Signup()">
                    <mat-placeholder>
                        <img src="{{imgUrl}}/assets/img/password.png"> &nbsp;Confirm Password</mat-placeholder>
                    <mat-error *ngIf="isConfirmPwdError" class="error-msg"> {{comPwdErrMsg}} </mat-error>
                    <span *ngIf="isConfirmPwdError" class="error-msg"> {{comPwdErrMsg}} </span>
                </mat-form-field>
                <button type="button" class="btn btn_py_login btn-block center-always" (click)="Signup()" [disabled]="!(phonenumber && password && confirm_password)" style="font-family: inherit;">Sign Up
                                </button>
            </div>
            <div *ngIf="!bnyregreq">
                <div class="signup_step2">
                    Welcome <br />
                    <div> <i class="fa fa-user-circle"></i><span class="email_det">{{email}} </span><img class="img-responsive pull-right" src="{{imgUrl}}/assets/img/ion-ios-arrow-forward.png" alt="goBack" (click)="editEmailEntered()" /></div>
                </div>
                <mat-form-field class="example-full-width">
                    <input matInput type="password" [type]="hide ? 'password' : 'text'" [(ngModel)]="password" name="password">
                    <mat-placeholder>
                        <img src="{{imgUrl}}/assets/img/password.png"> &nbsp; Password</mat-placeholder>
                    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
                    <mat-error *ngIf="isPwdError" class="error-msg"> {{errorMessage}} </mat-error>
                    <!-- <span *ngIf="isPwdError" class="error-msg"> {{PwdErrMsg}} </span> -->
                </mat-form-field>
                <mat-form-field class="example-full-width">
                    <input matInput type="password" [(ngModel)]="confirm_password" name="confirm_password" (keyup.enter)="Signup()">
                    <mat-placeholder>
                        <img src="{{imgUrl}}/assets/img/password.png"> &nbsp;Confirm Password</mat-placeholder>
                    <mat-error *ngIf="isConfirmPwdError" class="error-msg"> {{comPwdErrMsg}} </mat-error>
                    <!-- <span *ngIf="isConfirmPwdError" class="error-msg"> {{comPwdErrMsg}} </span> -->
                </mat-form-field>
                <button type="button" class="btn btn_py_login btn-block center-always" (click)="Signup()" [disabled]="!(password && confirm_password)" style="font-family: inherit;">Sign Up
                                </button>
            </div>
            <br />
            <div *ngIf="isError" class="error-msg" style="font-size: 16px;"> {{ error }} </div>
            <div *ngIf="isSuccess" class="success-msg" style="font-size: 16px;color:darkgreen;"> {{ successMessage }} </div>
        </div>
    </form>
    <!-- <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12 center-always">
                        <div class='hor-text'><span>OR</span></div>
                    </div> 
                    <span *ngIf="!isLoading"> 
                     <div class="row">
                        <button class="btn login-socialBtn login-facebook" (click)="socialBtn('facebookIdentity')"> <img class="mcursor" src='../../../../assets/img/facebook-letter-logo.png' /></button>
                        <button class="btn login-socialBtn login-linkedin" (click)="socialBtn('linkedInIdentity')"><img  class="mcursor" src='../../../../assets/img/linkedin-logo.png' /></button>
                        <button class="btn login-socialBtn login-google" (click)="socialBtn('googleIdentity')"><img  class="mcursor" src='../../../../assets/img/google-plus.png' /></button>
                        <!-- <img  class="mcursor" (click)="socialBtn('o365Identity')"  width="17%" src='../../../../assets/img/office-365-cloud.png' /> -->
    <!-- </span> -->
    <!-- <br />
                        <button class="btn btn-danger" (click)="changeTab()"> Change Tab</button> -
                    </div> -->
</div>