<div class="creation-container">
  <form class="form-box">
    <h3 style="text-align: center">Neuen Charakter erstellen</h3>
    <mat-form-field appearance="outline">
      <mat-label>Name</mat-label>
      <input matInput [(ngModel)]="characterName" name="name" />
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Volk</mat-label>
      <mat-select [(ngModel)]="characterSpecies" name="species">
        @for (species of species; track species) {
        <mat-option [value]="species.value">{{ species.view }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Klasse</mat-label>
      <mat-select [(ngModel)]="characterClass" name="class">
        @for (characterClass of classes; track characterClass) {
        <mat-option [value]="characterClass.value">{{
          characterClass.view
        }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Hintergrund</mat-label>
      <mat-select [(ngModel)]="characterBackground" name="background">
        @for (background of backgrounds; track background) {
        <mat-option [value]="background.value">{{
          background.view
        }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>Geschlecht</mat-label>
      <mat-select [(ngModel)]="characterGender" name="gender">
        @for (gender of genders; track gender) {
        <mat-option [value]="gender.value">{{ gender.view }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <div class="button-row">
      <button class="create-button" (click)="createCharacter()">
        Erstellen
      </button>
      <button class="cancel-button" [routerLink]="'character/picker'">
        Abbrechen
      </button>
    </div>
  </form>
</div>
