<div class="auth-page">
  <mat-card class="auth-card">
    <mat-card-header
      ><mat-card-title>TeamWallet</mat-card-title
      ><mat-card-subtitle>Konto erstellen</mat-card-subtitle></mat-card-header
    >
    <mat-card-content>
      @if (loadingInvitation()) {
        <div class="state"><mat-spinner diameter="32" /><span>Einladung wird geprüft …</span></div>
      } @else if (invitation(); as invite) {
        <div class="invite-summary">
          <strong>{{ invite.teamName }}</strong
          ><span>Du registrierst dich als {{ invite.playerName }}.</span>
        </div>
        <form [formGroup]="form" (ngSubmit)="onSubmit()">
          <mat-form-field appearance="outline"
            ><mat-label>E-Mail</mat-label
            ><input matInput type="email" formControlName="email" autocomplete="email"
          /></mat-form-field>
          <div class="name-row">
            <mat-form-field appearance="outline"
              ><mat-label>Vorname</mat-label
              ><input matInput formControlName="firstName" autocomplete="given-name"
            /></mat-form-field>
            <mat-form-field appearance="outline"
              ><mat-label>Nachname</mat-label
              ><input matInput formControlName="lastName" autocomplete="family-name"
            /></mat-form-field>
          </div>
          <mat-form-field appearance="outline"
            ><mat-label>Passwort</mat-label
            ><input matInput type="password" formControlName="password" autocomplete="new-password"
          /></mat-form-field>
          <mat-form-field appearance="outline"
            ><mat-label>Passwort wiederholen</mat-label
            ><input
              matInput
              type="password"
              formControlName="passwordConfirmation"
              autocomplete="new-password"
          /></mat-form-field>
          @if (errorMessage()) {
            <p class="error">{{ errorMessage() }}</p>
          }
          <button mat-flat-button type="submit" [disabled]="form.invalid || isSubmitting()">
            @if (isSubmitting()) {
              <mat-spinner diameter="20" />
            } @else {
              Konto erstellen
            }
          </button>
        </form>
      } @else {
        <div class="state error">
          <span>{{ errorMessage() }}</span
          ><a mat-button routerLink="/auth/login">Zur Anmeldung</a>
        </div>
      }
    </mat-card-content>
  </mat-card>
</div>
