<div class="ability-panel-container">
  <div class="tab-row">
    <button
      class="tab-button"
      (click)="active = 1"
      [class]="active === 1 ? 'active' : ''"
    >
      {{ "abilities.label" | translate }}
    </button>
    <button
      class="tab-button"
      (click)="active = 2"
      [class]="active === 2 ? 'active' : ''"
    >
      {{ "traits.label" | translate }}
    </button>
    <button
      class="tab-button"
      (click)="active = 3"
      [class]="active === 3 ? 'active' : ''"
    >
      {{ isMonk ? "Ki" : ("magic.spell" | translate) }}
    </button>
    <button
      class="tab-button"
      (click)="active = 4"
      [class]="active === 4 ? 'active' : ''"
    >
      {{ "proficiencies.label" | translate }}
    </button>
  </div>
  @switch (active) {
    @case (1) {
      <ability-table #abilityTable></ability-table>
    }
    @case (2) {
      <trait-table #traitTable></trait-table>
    }
    @case (3) {
      <spellslots-table #spellslots></spellslots-table>
    }
    @case (4) {
      <proficiencies-table #proficienciesTable></proficiencies-table>
    }
  }
</div>
