<form
  focusInvalidInput
  autocomplete="off"
  style="padding: 10px"
  (ngSubmit)="onCreateSubmit()"
  [formGroup]="createForm"
>
  <p>
    <mat-form-field>
      <mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
      <input
        type="text"
        matInput
        #firstname="matInput"
        formControlName="firstname"
        [ngClass]="{ 'is-invalid': submitted && formCtrls['firstname'].errors }"
        tabindex="0"
      />
      <mat-error *ngIf="formCtrls['firstname'].hasError('required')">
        {{ "LoginCreateUser_FirstnameRequired" | translate }}
      </mat-error>
      <mat-error *ngIf="formCtrls['firstname'].hasError('minlength')">
        {{ "LoginCreateUser_FirstnamePattern" | translate }}
      </mat-error>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field>
      <mat-label>{{ "LoginCreateUser_Lastname" | translate }}</mat-label>
      <input
        matInput
        type="text"
        formControlName="lastname"
        [ngClass]="{ 'is-invalid': submitted && formCtrls['lastname'].errors }"
        tabindex="1"
      />
      <mat-error *ngIf="formCtrls['lastname'].hasError('required')">
        {{ "LoginCreateUser_LastnameRequired" | translate }}
      </mat-error>
      <mat-error *ngIf="formCtrls['lastname'].hasError('minlength')">
        {{ "LoginCreateUser_LastnamePattern" | translate }}
      </mat-error>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field>
      <mat-label>{{ "LoginCreateUser_Email" | translate }}</mat-label>
      <input
        matInput
        type="email"
        formControlName="email"
        [ngClass]="{ 'is-invalid': submitted && formCtrls['email'].errors }"
        tabindex="3"
      />
      <mat-error *ngIf="formCtrls['email'].hasError('required')">
        {{ "LoginCreateUser_EmailRequired" | translate }}
      </mat-error>
      <mat-error *ngIf="formCtrls['email'].hasError('email')">
        {{ "LoginCreateUser_EmailPattern" | translate }}
      </mat-error>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field>
      <mat-label>{{ "LoginCreateUser_Username" | translate }}</mat-label>
      <input
        matInput
        type="text"
        formControlName="username"
        [ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
        tabindex="4"
      />
      <mat-error *ngIf="formCtrls['username'].hasError('required')">
        {{ "LoginCreateUser_UsernameRequired" | translate }}
      </mat-error>
      <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
        {{ "LoginCreateUser_UsernamePattern" | translate }}
      </mat-error>
    </mat-form-field>
  </p>
  <p>
    <mat-form-field>
      <mat-label>{{ "LoginCreateUser_Password" | translate }}</mat-label>
      <input
        matInput
        type="password"
        formControlName="password"
        [ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
        tabindex="5"
      />
      <mat-error *ngIf="formCtrls['password'].hasError('required')">
        {{ "LoginCreateUser_PasswordRequired" | translate }}
      </mat-error>
      <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
        {{ "LoginCreateUser_PasswordPattern" | translate }}
      </mat-error>
    </mat-form-field>
  </p>

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