<mat-tab-group>
    <mat-tab label="Erstellen">
        <div class="container my-3">
            <div class="row">
                <div [ngClass]="formFieldBSClass">
                    <mat-form-field>
                        <mat-label>Benutzername</mat-label>
                        <input 
                        matInput
                        [formControl]="username"
                        (blur)="updateErrorMessage()" 
                        required />
                        @if (email.invalid) {
                        <mat-error>{{errorMessage()}}</mat-error>
                        }
                    </mat-form-field>
                </div>
                <div [ngClass]="formFieldBSClass">
                    <mat-form-field>
                        <mat-label>E-Mail</mat-label>
                        <input 
                        matInput placeholder="user@example.com"
                        [formControl]="email"
                        (blur)="updateMailErrorMessage()" 
                        required />
                        @if (email.invalid) {
                        <mat-error>{{mailErrorMessage()}}</mat-error>
                        }
                    </mat-form-field>
                </div>
                <div [ngClass]="formFieldBSClass">
                    <div [ngClass]="buttonBSClass">
                        <button mat-fab extended (click)="create()">
                            <mat-icon>playlist_add</mat-icon>
                            Erstellen
                          </button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div [ngClass]="formFieldBSClass">
                    <mat-form-field>
                        <mat-label>Vorname</mat-label>
                        <input 
                        matInput
                        [formControl]="name"
                        (blur)="updateErrorMessage()" 
                        required />
                        @if (email.invalid) {
                        <mat-error>{{errorMessage()}}</mat-error>
                        }
                    </mat-form-field>
                </div>
                <div [ngClass]="formFieldBSClass">
                    <mat-form-field>
                        <mat-label>Nachname</mat-label>
                        <input 
                        matInput
                        [formControl]="surname"
                        (blur)="updateErrorMessage()" 
                        required />
                        @if (email.invalid) {
                        <mat-error>{{errorMessage()}}</mat-error>
                        }
                    </mat-form-field>
                </div>
                <div [ngClass]="formFieldBSClass">
                    <button mat-fab extended (click)="delete()">
                        <mat-icon>delete</mat-icon>
                        Löschen
                      </button>
                </div>
            </div>
        </div>
    </mat-tab>
    <mat-tab label="Import über AD">
        <app-user-group-dir-import></app-user-group-dir-import>
    </mat-tab>
</mat-tab-group>