<a mat-button routerLink="../"><mat-icon>arrow_back</mat-icon>Mehr</a>
<header>
  <p class="eyebrow">Mitglied verbinden</p>
  <h1>Einladen</h1>
  <p>Der Link ist personalisiert und darf nur an die ausgewählte Person gehen.</p>
</header>
@if (!canInvite()) {
  <mat-card class="notice"
    ><mat-icon>lock</mat-icon
    ><span>Einladungen können Teamleitung und Kassenwart erstellen.</span></mat-card
  >
} @else if (availablePlayers().length === 0) {
  <mat-card class="notice"
    ><mat-icon>check_circle</mat-icon
    ><span>Alle aktiven Mitglieder haben bereits einen Account.</span></mat-card
  >
} @else {
  <mat-card class="invite-card"
    ><form [formGroup]="form" (ngSubmit)="generateLink()">
      <mat-form-field appearance="outline"
        ><mat-label>Mitglied</mat-label
        ><mat-select formControlName="playerId">
          @for (player of availablePlayers(); track player.id) {
            <mat-option [value]="player.id"
              >{{ player.firstName }} {{ player.lastName }}</mat-option
            >
          }
        </mat-select></mat-form-field
      >
      <button mat-flat-button type="submit" [disabled]="form.invalid || loading()">
        <mat-icon>link</mat-icon>Link erzeugen
      </button>
    </form>
    @if (inviteLink()) {
      <div class="result">
        <mat-form-field appearance="outline"
          ><mat-label>Einladungslink</mat-label
          ><input matInput readonly [value]="inviteLink()" /></mat-form-field
        ><button mat-stroked-button type="button" (click)="copyLink()">
          <mat-icon>content_copy</mat-icon>Kopieren
        </button>
      </div>
    }
  </mat-card>
}
