<form
    focusInvalidInput
    autocomplete="off"
    style="padding: 10px"
    (ngSubmit)="onCreateSubmit()"
    [formGroup]="createForm"
>
    <p>
        <mat-form-field>
            <mat-label>{{ "CreateUser_Firstname" | translate }}</mat-label>
            <input
                type="text"
                matInput
                #firstname="matInput"
                formControlName="firstname"
                [ngClass]="{
                    'is-invalid': submitted && formCtrls['firstname'].errors,
                }"
                tabindex="0"
            />
            @if (formCtrls["firstname"].hasError("required")) {
                <mat-error>
                    {{ "CreateUser_FirstnameRequired" | translate }}
                </mat-error>
            }
            @if (formCtrls["firstname"].hasError("minlength")) {
                <mat-error>
                    {{ "CreateUser_FirstnamePattern" | translate }}
                </mat-error>
            }
        </mat-form-field>
    </p>
    <p>
        <mat-form-field>
            <mat-label>{{ "CreateUser_Lastname" | translate }}</mat-label>
            <input
                matInput
                type="text"
                formControlName="lastname"
                [ngClass]="{
                    'is-invalid': submitted && formCtrls['lastname'].errors,
                }"
                tabindex="1"
            />
            @if (formCtrls["lastname"].hasError("required")) {
                <mat-error>
                    {{ "CreateUser_LastnameRequired" | translate }}
                </mat-error>
            }
            @if (formCtrls["lastname"].hasError("minlength")) {
                <mat-error>
                    {{ "CreateUser_LastnamePattern" | translate }}
                </mat-error>
            }
        </mat-form-field>
    </p>
    <p>
        <mat-form-field>
            <mat-label>{{ "CreateUser_Email" | translate }}</mat-label>
            <input
                matInput
                type="email"
                formControlName="email"
                [ngClass]="{
                    'is-invalid': submitted && formCtrls['email'].errors,
                }"
                tabindex="3"
            />
            @if (formCtrls["email"].hasError("required")) {
                <mat-error>
                    {{ "CreateUser_EmailRequired" | translate }}
                </mat-error>
            }
            @if (formCtrls["email"].hasError("email")) {
                <mat-error>
                    {{ "CreateUser_EmailPattern" | translate }}
                </mat-error>
            }
        </mat-form-field>
    </p>
    <p>
        <mat-form-field>
            <mat-label>{{ "CreateUser_Username" | translate }}</mat-label>
            <input
                matInput
                type="text"
                formControlName="username"
                [ngClass]="{
                    'is-invalid': submitted && formCtrls['username'].errors,
                }"
                tabindex="4"
            />
            @if (formCtrls["username"].hasError("required")) {
                <mat-error>
                    {{ "CreateUser_UsernameRequired" | translate }}
                </mat-error>
            }
            @if (formCtrls["username"].hasError("minlength")) {
                <mat-error>
                    {{ "CreateUser_UsernamePattern" | translate }}
                </mat-error>
            }
        </mat-form-field>
    </p>
    <p>
        <mat-form-field>
            <mat-label>{{ "CreateUser_Password" | translate }}</mat-label>
            <input
                matInput
                type="password"
                formControlName="password"
                [ngClass]="{
                    'is-invalid': submitted && formCtrls['password'].errors,
                }"
                tabindex="5"
            />
            @if (formCtrls["password"].hasError("required")) {
                <mat-error>
                    {{ "CreateUser_PasswordRequired" | translate }}
                </mat-error>
            }
            @if (formCtrls["password"].hasError("pattern")) {
                <mat-error>
                    {{ "CreateUser_PasswordPattern" | translate }}
                </mat-error>
            }
        </mat-form-field>
    </p>

    <button [disabled]="!createForm.valid" mat-raised-button color="accent">
        {{ "CreateUser_BtnLogin" | translate }}
    </button>
    @if (error) {
        <div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
    }
</form>
