DNDTools/src/app/character/character-creator/character-creator.component.html

<div class="creation-container">
  <form class="form-box">
    <h2 style="text-align: center">{{ "creator.new" | translate }}</h2>
    <mat-form-field appearance="outline">
      <mat-label>{{ "creator.name" | translate }}</mat-label>
      <input matInput [(ngModel)]="characterName" name="name" />
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>{{ "creator.species" | translate }}</mat-label>
      <mat-select [(ngModel)]="characterSpecies" name="species">
        <mat-optgroup [label]="'Häufige Spezies'"></mat-optgroup>
        @for (species of list.commonRaces; track species) {
          <mat-option [value]="species">{{
            "species." + species | translate
          }}</mat-option>
        }
        <mat-optgroup [label]="'Andere Spezies'"></mat-optgroup>
        @for (species of list.otherRaces; track species) {
          <mat-option [value]="species">{{
            "species." + species | translate
          }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>{{ "creator.class" | translate }}</mat-label>
      <mat-select [(ngModel)]="characterClass" name="class">
        @for (characterClass of list.classes; track characterClass) {
          <mat-option [value]="characterClass">{{
            "classes." + characterClass | translate
          }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>{{ "creator.background" | translate }}</mat-label>
      <mat-select [(ngModel)]="characterBackground" name="background">
        @for (background of list.backgrounds; track background) {
          <mat-option [value]="background">{{
            "backgrounds." + background | translate
          }}</mat-option>
        }
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline">
      <mat-label>{{ "creator.gender" | translate }}</mat-label>
      <mat-select [(ngModel)]="characterGender" name="gender">
        @for (gender of list.genders; track gender) {
          <mat-option [value]="gender">{{
            "genders." + gender | translate
          }}</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>