species.component.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <div class="character-container">
  2. <div class="title">{{ "species." + speciesName | translate }}</div>
  3. @for (entry of species.content; let index = $index; track entry) {
  4. <div class="entry">
  5. @if (index === 0 || showContent[index]) {
  6. <div class="title-row">
  7. <div>
  8. <h2 class="b-1">{{ entry.title }}</h2>
  9. </div>
  10. @if (index !== 0) {
  11. <icon-button
  12. class="hide-button"
  13. [icon]="'visible'"
  14. style="margin-right: 1rem"
  15. (click)="toggleContentVisibility(index)"
  16. ></icon-button>
  17. }
  18. </div>
  19. <div [innerHTML]="entry.description"></div>
  20. <div class="abilities">
  21. @for (feature of entry.features; track feature) {
  22. <div class="ability">
  23. <divider
  24. [appearance]="'gold-1'"
  25. style="margin-bottom: 0.5rem"
  26. ></divider>
  27. <div class="ability-name">{{ feature.name }}</div>
  28. <icon-button
  29. [icon]="'add'"
  30. class="feature-button"
  31. (click)="addFeature(feature)"
  32. ></icon-button>
  33. <div
  34. class="feature-description"
  35. [innerHTML]="feature.description"
  36. ></div>
  37. </div>
  38. }
  39. </div>
  40. } @else {
  41. <div class="hidden-title-row">
  42. <div class="hidden-title">{{ entry.title }}</div>
  43. <icon-button
  44. [icon]="'hidden'"
  45. (click)="toggleContentVisibility(index)"
  46. ></icon-button>
  47. </div>
  48. }
  49. </div>
  50. }
  51. </div>