<div class="dd-container">
    <!-- username, e-mail -->
    <div class="dd-row input-row">
        <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>
        <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>
    <!-- firstname, surname -->
    <div class="dd-row input-row">
        <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>
        <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>
    <!-- shortname -->
    <div class="dd-row input-row">
        <mat-form-field>
            <mat-label>Kürzel</mat-label>
            <input matInput [formControl]="shortname" />
        </mat-form-field>
    </div>
    <!-- comment -->
    <div class="dd-row input-row">
        <mat-form-field>
            <mat-label>Kommentar</mat-label>
            <input matInput [formControl]="comment" />
        </mat-form-field>
    </div>
    <!-- save-button, delete-button -->
    <div class="dd-row button-row">
        <button mat-fab extended (click)="update()">
            <mat-icon>save</mat-icon>
            Speichern
        </button>
        <button mat-fab extended (click)="delete()">
            <mat-icon>delete</mat-icon>
            Löschen
        </button>
    </div>
</div>