<div class="container">
    <h1 style="margin-left: 20%; margin-right: 20%;" class="text-center">Welcome to [DAD] Sueca Online</h1>

    <form class="form-horizontal form-register jumbotron" style="margin-left: 20%; margin-right: 20%;"
          #registerForm="ngForm" (ngSubmit)="register()">
        <div id="legend">
            <legend><strong>Register</strong></legend>
        </div>
        <br/>
        <div class="form-group">
            <!-- Username -->
            <label for="username">Username</label>
            <input type="text" id="username" name="username" placeholder="username" class="form-control"
                   [(ngModel)]="user.username"
                   #username="ngModel">
            <p class="help-block alert-danger"
               [hidden]="username.valid || (!registerForm.submitted)">Username can only contain any
                letters or numbers, without spaces</p>
        </div>

        <div class="form-group">
            <!-- E-mail -->
            <label for="email">E-mail</label>
            <input type="text" id="email" name="email" placeholder="email" class="form-control"
                   [(ngModel)]="user.email"
                   #email="ngModel">
            <p class="help-block alert-danger" [hidden]="email.valid || (!registerForm.submitted)">
                Please provide your email</p>

        </div>

        <div class="form-group">
            <!-- Password-->
            <label for="password">Password</label>
            <input type="password" id="password" name="password" placeholder="password" class="form-control"
                   [(ngModel)]="user.password"
                   #password="ngModel">
            <p class="help-block alert-danger"
               [hidden]="password.valid || (!registerForm.submitted)">Password should be at least 4
                characters</p>
        </div>

        <div class="form-group">
            <!-- Password -->
            <label for="passwordConfirmation">Password (Confirm)</label>
            <input type="password" id="passwordConfirmation" name="passwordConfirmation" placeholder="password confirmation"
                   class="form-control" [(ngModel)]="user.passwordConfirmation"
                   #passwordConfirmation="ngModel">
            <p class="help-block alert-danger"
               [hidden]="passwordConfirmation.valid || (!registerForm.submitted)">Please
                confirm password</p>
        </div>

        <div class="form-group">
            <!-- Button Register -->
            <button class="btn btn-success" type="submit">Register</button>
        </div>
    </form>
</div>