<div class="character-container">
  <div class="title">{{ "classes." + class.title | translate }}</div>

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

  <div class="features">
    @for (feature of class.features; track feature) {
      <div class="feature">
        <divider
          [appearance]="'gold-1'"
          style="margin-bottom: 0.5rem"
        ></divider>
        <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>
