<div class="weapon-spell-container">
  <div class="tab-row">
    <button
      class="tab-button"
      (click)="active = 1"
      [class]="active === 1 ? 'active' : ''"
    >
      {{ "general.weapons" | translate }}
    </button>
    <button
      class="tab-button"
      (click)="active = 2"
      [class]="active === 2 ? 'active' : ''"
    >
      {{ "general.spells" | translate }}
    </button>
  </div>
  @switch (active) {
    @case (1) {
      <weapon-table #weaponTable></weapon-table>
    }
    @case (2) {
      <spell-table #spellTable></spell-table>
    }
  }
</div>
