<div class="container">
    <form [formGroup]="formModel" autocomplete='off'>
        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px">
            <div fxFlex="50">
                <mat-form-field>
                    <mat-label>First Name</mat-label>
                    <input matInput formControlName="firstName">
                    <mat-error *ngIf="formModel.controls['firstName'].invalid &&
                        (formModel.controls['firstName'].dirty ||
                        formModel.controls['firstName'].touched)">
                        <div *ngIf="formModel.controls['firstName'].errors.required">
                            First Name is required!
                        </div>
                    </mat-error>
                </mat-form-field>
            </div>
            <div fxFlex="50">
                <mat-form-field>
                    <mat-label>Last Name</mat-label>
                    <input matInput formControlName="lastName">
                    <mat-error *ngIf="formModel.controls['firstName'].invalid &&
                        (formModel.controls['lastName'].dirty ||
                        formModel.controls['lastName'].touched)">
                        <div *ngIf="formModel.controls['lastName'].errors.required">
                            Last Name is required!
                        </div>
                    </mat-error>
                </mat-form-field>
            </div>
        </div>
        <div fxLayout="row">
            <mat-form-field>
                <mat-label>User Name</mat-label>
                <input matInput formControlName="userName">
                <mat-error *ngIf="formModel.controls['userName'].invalid &&
                        (formModel.controls['userName'].dirty ||
                        formModel.controls['userName'].touched)">
                    <div *ngIf="formModel.controls['userName'].errors.required">
                        User Name is required!
                    </div>
                </mat-error>
            </mat-form-field>
        </div>
        <div formGroupName="emails">
            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px">
                <div fxFlex="50">
                    <mat-form-field>
                        <mat-label>Email</mat-label>
                        <input matInput formControlName="email">
                        <mat-error *ngIf="formModel.get('emails.email').invalid &&
                            (formModel.get('emails.email').dirty||
                            formModel.get('emails.email').touched)">
                            <div *ngIf="formModel.get('emails.email').errors.required">
                                Email is required!
                            </div>
                            <div *ngIf="formModel.get('emails.email').errors.email">
                                You must add a valid email!
                            </div>
                        </mat-error>
                    </mat-form-field>
                </div>
                <div fxFlex="50">
                    <mat-form-field>
                        <mat-label>Email Again</mat-label>
                        <input matInput formControlName="confirmEmail">
                        <mat-error *ngIf="formModel.get('emails.confirmEmail').invalid &&
                            (formModel.get('emails.confirmEmail').dirty ||
                            formModel.get('emails.confirmEmail').touched)">
                            <div *ngIf="formModel.get('emails.confirmEmail').errors.required">
                                Confirm email is required!
                            </div>
                            <div *ngIf="formModel.get('emails.confirmEmail').errors.mustMatch">
                                Confirm email not match!
                            </div>
                            <div *ngIf="formModel.get('emails.confirmEmail').errors.email">
                                You must add a valid email!
                            </div>
                        </mat-error>
                    </mat-form-field>
                </div>
            </div>
        </div>
        <div formGroupName="passwords">
            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="16px">
                <div fxFlex="50">
                    <mat-form-field>
                        <mat-label>Password</mat-label>
                        <input matInput formControlName="password" type="password" autocomplete="disabled">
                        <mat-error *ngIf="formModel.get('passwords.password').invalid &&
                            (formModel.get('passwords.password').dirty ||
                            formModel.get('passwords.password').touched)">
                            <div *ngIf="formModel.get('passwords.password').errors.required">
                                Password is required!
                            </div>
                            <div *ngIf="formModel.get('passwords.password').errors.containUpperCase">
                                Password has to contain at least 1 upper case character!
                            </div>
                            <div *ngIf="formModel.get('passwords.password').errors.containDigit">
                                Password has to contain at least 1 digit!
                            </div>
                            <div *ngIf="formModel.get('passwords.password').errors.minlength">
                                Password has to be at least {{minLength}} character!
                            </div>
                        </mat-error>
                    </mat-form-field>
                </div>
                <div fxFlex="50">
                    <mat-form-field>
                        <mat-label>Password Again</mat-label>
                        <input matInput formControlName="confirmPassword" type="password">
                        <mat-error *ngIf="formModel.get('passwords.confirmPassword').invalid
                            &&
                            (formModel.get('passwords.confirmPassword').dirty ||
                            formModel.get('passwords.confirmPassword').touched)">
                            <div *ngIf="formModel.get('passwords.confirmPassword').errors.mustMatch">
                                Confirm Password not match!
                            </div>
                            <div *ngIf="formModel.get('passwords.confirmPassword').errors?.required">
                                Confirm Password is required!
                            </div>
                        </mat-error>
                    </mat-form-field>
                </div>
            </div>
        </div>
    </form>
    <br>
    <mat-divider></mat-divider>
    <br>
    <div fxLayout="row">
        <button mat-button class="button-ok full-width" [disabled]="!formModel.valid"
            (click)="onSubmit()">Regisztráció</button>
    </div>
</div>