<div [nbSpinner]="isCallback" nbSpinnerStatus="info" nbSpinnerSize="giant">

    <h1 id="title" class="title">{{displayRegister?'Register':'Login'}}</h1>
    <p class="sub-title">Hello! Log in with your email.</p>

    <nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
        <p class="alert-title"><b>Oh snap!</b></p>
        <ul class="alert-message-list">
            <li *ngFor="let error of errors" class="alert-message">{{ error }}</li>
        </ul>
    </nb-alert>

    <nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
        <p class="alert-title"><b>Hooray!</b></p>
        <ul class="alert-message-list">
            <li *ngFor="let message of messages" class="alert-message">{{ message }}</li>
        </ul>
    </nb-alert>

    <form (ngSubmit)="postData()" #form="ngForm" aria-labelledby="title">


        <div class="form-control-group" *ngIf="displayRegister">
            <label class="label" for="input-name">First name:</label>
            <input nbInput [(ngModel)]="user.firstName" #firstName="ngModel" id="input-name" name="firstName"
                placeholder="First name" autofocus fullWidth fieldSize="large"
                [status]="firstName.dirty ? (firstName.invalid  ? 'danger' : 'success') : 'basic'"
                [required]="getConfigValue('forms.validation.fullName.required')"
                [minlength]="getConfigValue('forms.validation.fullName.minLength')"
                [maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
                [attr.aria-invalid]="firstName.invalid && firstName.touched ? true : null">
            <ng-container *ngIf="firstName.invalid && firstName.touched">
                <p class="caption status-danger" *ngIf="firstName.errors?.required">
                    First name is required!
                </p>
                <p class="caption status-danger" *ngIf="firstName.errors?.minlength || firstName.errors?.maxlength">
                    First name should contains
                    from {{getConfigValue('forms.validation.fullName.minLength')}}
                    to {{getConfigValue('forms.validation.fullName.maxLength')}}
                    characters
                </p>
            </ng-container>
        </div>

        <div class="form-control-group" *ngIf="displayRegister">
            <label class="label" for="input-name">Last name:</label>
            <input nbInput [(ngModel)]="user.lastName" #lastName="ngModel" id="input-name" name="lastName"
                placeholder="Last name" autofocus fullWidth fieldSize="large"
                [status]="lastName.dirty ? (lastName.invalid  ? 'danger' : 'success') : 'basic'"
                [required]="getConfigValue('forms.validation.fullName.required')"
                [minlength]="getConfigValue('forms.validation.fullName.minLength')"
                [maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
                [attr.aria-invalid]="lastName.invalid && lastName.touched ? true : null">
            <ng-container *ngIf="lastName.invalid && lastName.touched">
                <p class="caption status-danger" *ngIf="lastName.errors?.required">
                    Last name is required!
                </p>
                <p class="caption status-danger" *ngIf="lastName.errors?.minlength || lastName.errors?.maxlength">
                    Last name should contains
                    from {{getConfigValue('forms.validation.fullName.minLength')}}
                    to {{getConfigValue('forms.validation.fullName.maxLength')}}
                    characters
                </p>
            </ng-container>
        </div>



        <div class="form-control-group">
            <label class="label" for="input-email">Email address:</label>
            <input nbInput fullWidth [(ngModel)]="user.email" #email="ngModel" name="email" id="input-email"
                pattern=".+@.+\..+" placeholder="Email address" fieldSize="large" autofocus
                [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : 'basic'"
                [required]="getConfigValue('forms.validation.email.required')"
                [attr.aria-invalid]="email.invalid && email.touched ? true : null">
            <ng-container *ngIf="email.invalid && email.touched">
                <p class="caption status-danger" *ngIf="email.errors?.required">
                    Email is required!
                </p>
                <p class="caption status-danger" *ngIf="email.errors?.pattern">
                    Email should be the real one!
                </p>
            </ng-container>
        </div>

        <div class="form-control-group">
            <span class="label-with-link">
                <label class="label" for="input-password">Password:</label>
                <a class="forgot-password caption-2" routerLink="../request-password" *ngIf="!displayRegister">Forgot
                    Password?</a>
            </span>
            <input nbInput fullWidth [(ngModel)]="user.password" #password="ngModel" name="password" type="password"
                id="input-password" placeholder="Password" fieldSize="large"
                [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : 'basic'"
                [required]="getConfigValue('forms.validation.password.required')"
                [minlength]="getConfigValue('forms.validation.password.minLength')"
                [maxlength]="getConfigValue('forms.validation.password.maxLength')"
                [attr.aria-invalid]="password.invalid && password.touched ? true : null">
            <ng-container *ngIf="password.invalid && password.touched ">
                <p class="caption status-danger" *ngIf="password.errors?.required">
                    Password is required!
                </p>
                <p class="caption status-danger" *ngIf="password.errors?.minlength || password.errors?.maxlength">
                    Password should contain
                    from {{ getConfigValue('forms.validation.password.minLength') }}
                    to {{ getConfigValue('forms.validation.password.maxLength') }}
                    characters
                </p>
            </ng-container>
        </div>

        <div class="form-control-group" *ngIf="displayRegister">
            <label class="label" for="input-re-password">Repeat password:</label>
            <input nbInput [(ngModel)]="confirmPassword" #rePass="ngModel" type="password" id="input-re-password"
                name="rePass" placeholder="Confirm Password" fullWidth fieldSize="large"
                [status]="rePass.dirty ? (rePass.invalid || password.value != rePass.value  ? 'danger' : 'success') : 'basic'"
                [required]="getConfigValue('forms.validation.password.required')"
                [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null">
            <ng-container *ngIf="rePass.invalid && rePass.touched|| password.value != rePass.value">
                <p class="caption status-danger" *ngIf="rePass.errors?.required">
                    Password confirmation is required!
                </p>
                <p class="caption status-danger" *ngIf="password.value != rePass.value && !rePass.errors?.required">
                    Password does not match the confirm password.
                </p>
            </ng-container>
        </div>

        <div class="form-control-group accept-group" *ngIf="displayRegister&&getConfigValue('forms.register.terms')">
            <nb-checkbox name="terms" [(ngModel)]="user.terms" [required]="getConfigValue('forms.register.terms')">
                Agree to <a href="#" target="_blank"><strong>Terms & Conditions</strong></a>
            </nb-checkbox>
        </div>
        <div class="form-control-group accept-group">
            <nb-checkbox name="rememberMe" [(ngModel)]="rememberMe" *ngIf="!displayRegister">Remember me</nb-checkbox>
        </div>

        <button nbButton fullWidth status="primary" size="large" [disabled]="submitted || !form.valid"
            [class.btn-pulse]="submitted">
            {{displayRegister?'Register':'Log In'}}
        </button>
    </form>

    <section *ngIf="socialLinks && socialLinks.length > 0" class="links" aria-label="Social sign in">
        or enter with:
        <button nbButton type="button" fullWidth size="large" [class.btn-pulse]="submitted" (click)="googleLogin()">
            <nb-icon icon="google"></nb-icon> Google Login
        </button>
        <!-- <div class="socials">
        <ng-container *ngFor="let socialLink of socialLinks">
            <a *ngIf="socialLink.link" [routerLink]="socialLink.link" [attr.target]="socialLink.target"
                [attr.class]="socialLink.icon" [class.with-icon]="socialLink.icon">
                <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>{{ socialLink.title }}
                <ng-template #title>{{ socialLink.title }}</ng-template>
            </a>
            <a *ngIf="socialLink.url" [attr.href]="socialLink.url" [attr.target]="socialLink.target"
                [attr.class]="socialLink.icon" [class.with-icon]="socialLink.icon">
                <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>
                <ng-template #title>{{ socialLink.title }}</ng-template>
            </a>
        </ng-container>
    </div> -->
    </section>

    <section class="another-action" aria-label="Sign in" *ngIf="displayRegister">
        Already have an account? <span class="text-link" (click)="displayRegister=false">Log in</span>
    </section>
    <section class="another-action" aria-label="Register" *ngIf="!displayRegister">
        Don't have an account? <span class="text-link" (click)="displayRegister=true">Register</span>
    </section>


</div>