DNDTools/src/app/journal/journal-character/species/species.component.html

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

  @for (entry of species.content; let index = $index; track entry) {
    <div class="entry">
      @if (index === 0 || showContent[index]) {
        <div class="title-row">
          <div>
            <h2 class="b-1">{{ entry.title }}</h2>
          </div>
          @if (index !== 0) {
            <icon-button
              class="hide-button"
              [icon]="'visible'"
              style="margin-right: 1rem"
              (click)="toggleContentVisibility(index)"
            ></icon-button>
          }
        </div>
        <div [innerHTML]="entry.description"></div>
        <div class="abilities">
          @for (feature of entry.features; track feature) {
            <div class="ability">
              <divider
                [appearance]="'gold-1'"
                style="margin-bottom: 0.5rem"
              ></divider>
              <div class="ability-name">{{ feature.name }}</div>
              <icon-button
                [icon]="'add'"
                class="feature-button"
                (click)="addFeature(feature)"
              ></icon-button>
              <div
                class="feature-description"
                [innerHTML]="feature.description"
              ></div>
            </div>
          }
        </div>
      } @else {
        <div class="hidden-title-row">
          <div class="hidden-title">{{ entry.title }}</div>
          <icon-button
            [icon]="'hidden'"
            (click)="toggleContentVisibility(index)"
          ></icon-button>
        </div>
      }
    </div>
  }
</div>