<div class="subclass-container">
  @if (!subclass) {
    <div class="title">{{ "subclasses.empty" | translate }}</div>
    <div class="description">
      <p>{{ "subclasses.hint" | translate }}</p>
      <p>
        <mat-form-field appearance="outline" class="t-1">
          <mat-label>{{
            "character.subclass." + className | translate
          }}</mat-label>
          <mat-select
            (selectionChange)="updateData()"
            [(ngModel)]="data.subclass"
            name="species"
          >
            @for (subclass of availableSubclasses; track subclass) {
              <mat-option [value]="subclass">{{
                "subclasses." + className + "." + subclass | translate
              }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </p>
    </div>
  } @else {
    <div class="title">
      {{ "subclasses." + className + "." + subclassName | translate }}
    </div>

    <div [innerHTML]="subclass.description"></div>

    <div class="features">
      @for (feature of subclass.features; track feature) {
        <div class="feature">
          <hr />
          <div class="feature-name">{{ feature.name }}</div>
          <div class="feature-level">{{ feature.level }}</div>
          <icon-button
            [icon]="'add'"
            class="feature-button"
            (click)="addFeature(feature)"
          ></icon-button>
          <div [innerHTML]="feature.description"></div>
        </div>
      }
    </div>
  }
</div>
