<form
    focusInvalidInput
    autocomplete="off"
    style="padding: 10px"
    [formGroup]="loginForm"
    (ngSubmit)="onLoginSubmit()"
>
    <p>
        <mat-form-field>
            <mat-label>{{ "LoginUser_Username" | translate }}</mat-label>
            <input
                type="text"
                matInput
                #username="matInput"
                formControlName="username"
                [ngClass]="{
                    'is-invalid': submitted && formCtrls['username'].errors,
                }"
            />
            @if (formCtrls["username"].hasError("required")) {
                <mat-error>
                    {{ "LoginUser_UsernameRequired" | translate }}
                </mat-error>
            }
            @if (formCtrls["username"].hasError("minlength")) {
                <mat-error>
                    {{ 'LoginUser_UsernamePattern | translate }}
                </mat-error>
            }
        </mat-form-field>
    </p>
    <p>
        <mat-form-field>
            <mat-label>{{ "LoginUser_Password" | translate }}</mat-label>
            <input
                type="password"
                matInput
                formControlName="password"
                [ngClass]="{
                    'is-invalid': submitted && formCtrls['password'].errors,
                }"
            />
            @if (formCtrls["password"].hasError("required")) {
                <mat-error>
                    {{ "LoginUser_PasswordRequired" | translate }}
                </mat-error>
            }
            @if (formCtrls["password"].hasError("pattern")) {
                <mat-error>
                    {{ "LoginUser_PasswordPattern" | translate }}
                </mat-error>
            }
        </mat-form-field>
    </p>

    <button [disabled]="loading" mat-raised-button color="accent">
        @if (loading) {
            <span class="spinner-border spinner-border-sm mr-1"></span>
        }
        {{ "LoginUser_BtnLogin" | translate }}
    </button>

    @if (error) {
        <div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
    }
</form>
