<div class="row">
    <div class="col-lg-7 col-md-7 col-sm-6 col-xs-12 no-padding-right">
        <div class="logo_img">
            <span class="alti-logo"></span>
            <div class="introcontent">
                <h1>Be the
                    <br>
                    game changer
                </h1>
            </div>
        </div>

    </div>
    <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 intro_block_log padding-top-40">
        <div class="row">
            <img src="{{imgUrl}}/assets/img/new_pg_logo@2x_1.png" alt="Halo, Ready for the Dive" class="pg-logo" />
        </div>
        <div class="align-center">
            <div>
                <h3>
                    <b>Start Exploring with Playground</b>
                </h3>
                <small>Enter your email address and proceed </small>
            </div>
            <!-- <form [formGroup]="myForm"> -->
            <div class="width-50 padding-top-40">
                <mat-form-field class="example-full-width">
                    <span matPrefix>
                        <img src="{{imgUrl}}/assets/img/mail_icon_new.png"> &nbsp;</span>
                    <input matInput [formControl]="emailFormControl" name="email" [(ngModel)]="email" (focusout)="OnFocusOutLogin()"
                        email required>
                    <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>
                        Email ID</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>
                <mat-form-field class="example-full-width" *ngIf='showPasswordField'>
                    <span matPrefix>
                        <img src="{{imgUrl}}/assets/img/password_icon_new.png"> &nbsp;</span>
                    <input matInput type="password" [type]="hide ? 'password' : 'text'" [(ngModel)]="password" name="password"
                        minlength="6">
                    <mat-placeholder>
                        Password</mat-placeholder>
                    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                    <mat-error *ngIf="isPwdError" class="error-msg"> {{errorMessage}} </mat-error>
                    <mat-error ng-message="minlength" class="error-msg"> {{pwdLengthErrorMsg}} </mat-error>
                    <mat-hint align="end">(Minimum 6 characters)</mat-hint>
                </mat-form-field>
                <div *ngIf="showUserRegistration">
                    <mat-form-field class="example-full-width">
                        <span matPrefix>
                            <img src="{{imgUrl}}/assets/img/password_icon_new.png"> &nbsp;</span>
                        <input matInput type="password" [type]="hide ? 'password' : 'text'" [(ngModel)]="password" name="password"
                            minlength="6">
                        <mat-placeholder>
                            Password</mat-placeholder>
                        <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
                        <mat-error *ngIf="isPwdError" class="error-msg"> {{errorMessage}} </mat-error>
                        <mat-error ng-message="minlength" class="error-msg"> {{pwdLengthErrorMsg}} </mat-error>
                        <mat-hint align="end">(Minimum 6 characters)</mat-hint>
                    </mat-form-field>
                    <mat-form-field class="example-full-width">
                        <span matPrefix>
                            <img src="{{imgUrl}}/assets/img/password_icon_new.png"> &nbsp;</span>
                        <input matInput type="password" [(ngModel)]="confirm_password" name="confirm_password"
                            minlength="6">
                        <mat-placeholder>
                            Confirm Password</mat-placeholder>
                        <mat-error ng-message="minlength" class="error-msg"> {{pwdLengthErrorMsg}} </mat-error>
                        <span *ngIf="isConfirmPwdError" class="error-msg"> {{comPwdErrMsg}} </span>
                    </mat-form-field>
                    <button mat-raised-button="" class="btn-block btn_py_login mat-raised-button margin-top-20"
                        [disabled]="!(email && password && confirm_password)" (click)='registerCandidate()'>
                        <span class="pull-right">
                            <img src="{{imgUrl}}/assets/img/proceed_btn_arrow.png">
                        </span>
                        <span class="mat-button-wrapper">Register</span>
                        <div class="mat-button-ripple mat-ripple" matripple=""></div>
                        <div class="mat-button-focus-overlay"></div>
                    </button>
                </div>
                <button mat-raised-button="" class="btn-block btn_py_login mat-raised-button margin-top-20" (click)='OnFocusOutLogin()'
                    [disabled]="emailFormControl.hasError('email')" *ngIf='!showPasswordField && !showUserRegistration'>
                    <span class="pull-right">
                        <img src="{{imgUrl}}/assets/img/proceed_btn_arrow.png">
                    </span>
                    <span class="mat-button-wrapper">Proceed</span>
                    <div class="mat-button-ripple mat-ripple" matripple=""></div>
                    <div class="mat-button-focus-overlay"></div>
                </button>
                <button mat-raised-button="" class="btn-block btn_py_login mat-raised-button margin-top-20" [disabled]="!(email && password)"
                    *ngIf="showPasswordField" (click)="login()">
                    <span class="pull-right">
                        <img src="{{imgUrl}}/assets/img/proceed_btn_arrow.png">
                    </span>
                    <span class="mat-button-wrapper">login</span>
                    <div class="mat-button-ripple mat-ripple" matripple=""></div>
                    <div class="mat-button-focus-overlay"></div>
                </button>
                <div class="align-center plain-btnhold">
                    <a (click)="gotoFPpage()">Forgot Password?</a>
                </div>
                <div *ngIf="isError" class="error-msg" style="font-size: 16px;"> {{error}} </div>
                <div *ngIf="isSuccess" class="error-msg" style="font-size: 16px;color:darkgreen;"> {{successMessage}}
                </div>
            </div>
        </div>
    </div>



</div>