<div class="flex column fill middle">
    <form [formGroup]="form" (ngSubmit)="createUser()" #formDirective="ngForm">
        <mat-card>
            <mat-card-content>
                <mat-form-field class="margin">
                    <mat-label>{{'profile.username' | i18n}}</mat-label>
                    <input matInput formControlName="username" type="text" [required]="true">
                    <mat-error *ngFor="let error of form.get('username').errors | keyvalue">
                        {{'user.error.' + error.key | i18n}}
                    </mat-error>
                </mat-form-field>

                <mat-form-field class="margin">
                    <mat-label>{{'profile.name' | i18n}}</mat-label>
                    <input matInput formControlName="name" type="text">
                    <mat-error *ngFor="let error of form.get('name').errors | keyvalue">
                        {{'user.error.' + error.key | i18n}}
                    </mat-error>
                </mat-form-field>

                <mat-form-field class="margin">
                    <mat-label>{{'profile.email' | i18n}}</mat-label>
                    <input matInput formControlName="email" type="email">
                    <mat-error *ngFor="let error of form.get('email').errors | keyvalue">
                        {{'user.error.' + error.key | i18n}}
                    </mat-error>
                </mat-form-field>

                <mat-form-field class="margin">
                    <mat-label>{{'user.password' | i18n}}</mat-label>
                    <input matInput formControlName="password" type="password">
                    <mat-error *ngFor="let error of form.get('password').errors | keyvalue">
                        {{'password.error.' + error.key | i18n}}
                    </mat-error>
                </mat-form-field>

                <mat-slide-toggle class="margin" (change)="isAdmin=$event.checked">
                    {{'user.admin' | i18n}}
                </mat-slide-toggle>
            </mat-card-content>
            <mat-card-actions>
                @if (!working) {
                <button type="submit" mat-raised-button color="primary"
                    [disabled]="form.invalid"><mat-icon>person_add</mat-icon>{{'user.create' |
                    i18n}}</button>
                }
            </mat-card-actions>
        </mat-card>
    </form>
</div>