<div class="dd-container">
    <!-- id, username, e-mail -->
    <div class="dd-row input-row">
        <mat-form-field class="w10p">
            <mat-label>Id</mat-label>
            <input matInput readonly [value]="user.id" />
        </mat-form-field>
        <mat-form-field class="w30p">
            <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 class="w60p">
            <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>
        <mat-form-field>
            <mat-label>Datumsformat</mat-label>
            <mat-select [(value)]="user.dateFormat" [(ngModel)]="user.dateFormat">
                @for (format of allowedDateFormats; track format) {
                <mat-option [value]="format.value">{{format.name}}</mat-option>
                }
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <mat-label>Sprache</mat-label>
            <mat-select [(value)]="user.language" [(ngModel)]="user.language">
                @for (language of allowedLanguages; track language) {
                <mat-option [value]="language.value">{{language.name}}</mat-option>
                }
            </mat-select>
        </mat-form-field>
    </div>
    <!-- comment -->
    <div class="dd-row input-row">
        <mat-form-field>
            <mat-label>Kommentar</mat-label>
            <textarea matInput [formControl]="comment"></textarea>
        </mat-form-field>
    </div>
    <mat-divider></mat-divider>
    <!-- addedWho, addedWhen, changedWho and changedWhen -->
    <div class="dd-row input-row">
        <mat-form-field>
            <mat-label>Hinzugefügt wer</mat-label>
            <input matInput readonly [value]="user.addedWho" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Hinzugefügt wann</mat-label>
            <input matInput readonly [value]="user.addedWhen | date:'dd.MM.yyyy'" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Geändert wer</mat-label>
            <input matInput readonly [value]="user.changedWho" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>Geändert wann</mat-label>
            <input matInput readonly [value]="user.changedWhen | date:'dd.MM.yyyy'" />
        </mat-form-field>
    </div>
    <mat-divider></mat-divider>
    <!-- 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>