<ngb-carousel #carousel class="register">

        <ng-template ngbSlide [id]="slide1">

            <div class="container">

                <div class="register_title">
                    <div class="d-flex justify-content-center">
                        <div class="col-12 text-center">
                            <h2>Inlog gegevens </h2>
                        </div>
                    </div>
                </div>

                <form class="form-login" #registerForm="ngForm" (ngSubmit)="onSubmit()">
                    <div class="wrapper-register">
                        <div class="col-12">
                            <div class="form-group">
                                <input placeholder="Gebruikersnaam" type="text" class="form-control" [(ngModel)]="model.username" name="username" #username="ngModel" required />
                                <div [hidden]="username.valid || username.pristine" class="alert alert-danger">Gebruikersnaam is verplicht!</div>
                            </div>
                            <div class="form-group">
                                <input placeholder="E-mailadres" type="email" class="form-control" [(ngModel)]="model.email" name="email" #email="ngModel" required />
                                <div [hidden]="email.valid || email.pristine" class="alert alert-danger">Voer geldig E-mailadres in!</div>
                            </div>
                            <div class="form-group">
                                <input placeholder="Wachtwoord" type="password" class="form-control" [(ngModel)]="model.password" name="password" #password="ngModel" required />
                                <div [hidden]="password.valid || password.pristine" class="alert alert-danger">Wachtwoord is verplicht!</div>
                            </div>
                            <br/>
                            <br/>
                            <div class="form-group">
                                <h3>Bevestig inloggegevens</h3>
                            </div>
                            <div class="form-group">
                                <input placeholder="Bevestig E-mailadres" type="email" class="form-control" name="emailConfirm" [(ngModel)]="model.emailConfirm" #emailConfirm="ngModel" required />
                                <div [hidden]="emailConfirm.valid || emailConfirm.pristine" class="alert alert-danger">Bevestig E-mailadres!</div>
                            </div>
                            <div class="form-group">
                                <input placeholder="Bevestig Wachtwoord!" type="password" class="form-control" name="passwordConfirm" [(ngModel)]="model.passwordConfirm" #passwordConfirm="ngModel" required />
                                <div [hidden]="passwordConfirm.valid || passwordConfirm.pristine" class="alert alert-danger">Bevestig Wachtwoord!</div>
                            </div>
                        </div>
                    </div>
                    <div class="volgende">
                        <button type="submit" [disabled]="!registerForm.form.valid || model.passwordConfirm != model.password || model.emailConfirm != model.email" class="btn right" data-slide="next">Volgende</button>
                    </div>
                </form>

            </div>
        </ng-template>

        <ng-template ngbSlide [id]="slide2">
            <div class="container">
                <div class="register_title">
                    <div class="d-flex justify-content-center">
                        <div class="col-12 text-center">
                            <h2>Profielgegevens</h2>
                        </div>
                    </div>
                </div>
                <div class="wrapper-register">
                    <div class="col-12">
                        <form class="form-profiel" name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
                            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !voornaam.valid }">
                                <input placeholder="Voornaam" type="text" class="form-control" name="voornaam" [(ngModel)]="model.voornaam" #voornaam="ngModel" required />
                                <div *ngIf="f.submitted && !userName.valid" class="help-block">Voornaam is verplicht</div>
                            </div>
                            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !achternaam.valid }">
                                <input placeholder="Achternaam" type="text" class="form-control" name="achternaam" [(ngModel)]="model.achternaam" #achternaam="ngModel" required />
                                <div *ngIf="f.submitted && !achternaam.valid" class="help-block">Achternaam is verplicht</div>
                            </div>
                            <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !geboortedatum.valid }">
                            <div class="input-group">
                                    <input class="form-control" datepicker-popup="dd.mm.yyyy" placeholder="Geboortedatum" name="geboortedatum" [(ngModel)]="model.geboortedatum" ngbDatepicker #geboortedatum="ngbDatepicker" style="position: relative; z-index: 100000;">
                                    <div (click)="geboortedatum.toggle()" >
                                        <i class="fa fa-calendar" aria-hidden="true"></i>
                                    </div>
                            </div>
                            </div>
                            <div class="form-group">
                                <div class="direct">
                                Man <input type="radio" name="geslacht" value="man" [(ngModel)]="model.geslacht" #geslacht="ngModel" required>
                                Vrouw <input type="radio" name="geslacht" value="vrouw" [(ngModel)]="model.geslacht" #geslacht="ngModel" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <input placeholder="Bedrijfsnaam" type="text" class="form-control" name="bedrijf" [(ngModel)]="model.bedrijf" #bedrijf="ngModel" required />
                            </div>
                        </form>
                    </div>
                </div>
                <div class="volgende">
                    <button type="submit" class="btn ">Volgende</button>
                </div>
            </div>
        </ng-template>

        <ng-template ngbSlide [id]="slide3">
            <div class="container">
                <div class="register_title">
                    <div class="d-flex justify-content-center">
                        <div class="col-12 text-center">
                            <h2>Adresgegevens & foto</h2>
                        </div>
                    </div>
                </div>
                <div class="wrapper-register">
                    <div class="col-12">
                        <form class="form-adres" name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
                            <div class="form-group">
                                <input placeholder="Straat" type="text" class="form-control" name="straat" [(ngModel)]="model.straat" #straat="ngModel" required />
                            </div>
                            <div class="form-group">
                                <input placeholder="Huisnummer + Toev." type="text" class="form-control" name="huisnummer" [(ngModel)]="model.huisnummer" #huisnummer="ngModel" required />
                            </div>
                            <div class="form-group">
                                <input placeholder="postcode" type="text" class="form-control" name="postcode" [(ngModel)]="model.postcode" #postcode="ngModel" required />
                            </div>
                            <div class="form-group" >
                                <input placeholder="Woonplaats" type="text" class="form-control" name="woonplaats" [(ngModel)]="model.woonplaats" #woonplaats="ngModel" required />
                            </div>
                            <div class="form-group">
                                <select class="form-control empty" name="land" [(ngModel)]="model.land" #land="ngModel" required>
                                    <option value="" selected disabled>-- Selecteer land</option>
                                    <option value="NL">Nederland</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="volgende">
                    <button type="submit" class="btn ">Volgende</button>
                </div>
            </div>
        </ng-template>

</ngb-carousel>