DNDTools/src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.html

<div class="dimensions">
  <div class="shadow-box">
    <div class="title t-0">{{ "spells.favorite" | translate }}</div>
    <hr style="margin-bottom: 0; margin: 1.5rem 2rem 0 2rem" />
    <div class="heading-list">
      <div>{{ "spells.header.cost" | translate }}</div>
      <div>{{ "spells.header.name" | translate }}</div>
      <div>{{ "spells.header.level" | translate }}</div>
      <div>{{ "spells.header.bonus" | translate }}</div>
      <div>{{ "spells.header.effect" | translate }}</div>
      <div>{{ "spells.header.range" | translate }}</div>
    </div>
  </div>
  <div id="spells-table" class="item-list table-content">
    @for (spell of preparedSpells; let index = $index; track spell) {
      <div
        matRipple
        class="spell-item"
        [ngClass]="{ selected: checkedSpells[index] }"
        (click)="checkedSpells[index] = !checkedSpells[index]"
      >
        <!--  Range Icon -->
        <ng-container
          [ngTemplateOutlet]="costTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Name -->
        <ng-container
          [ngTemplateOutlet]="spellNameTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Level -->
        <ng-container
          [ngTemplateOutlet]="spellLevelTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Attack -->
        <ng-container
          [ngTemplateOutlet]="spellAttackTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Damage/Heal -->
        <ng-container
          [ngTemplateOutlet]="spellDamageTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
        <div class="vertical-line"></div>

        <!-- Range -->
        <ng-container
          [ngTemplateOutlet]="spellRangeTemplate"
          [ngTemplateOutletContext]="{ spell: spell }"
        ></ng-container>
      </div>
    } @empty {
      <div
        style="
          text-align: center;
          margin-top: 3rem;
          font-size: 1.25rem;
          font-weight: 500;
        "
        [innerHTML]="'spells.emptyFavorites' | translate"
      ></div>
    }
  </div>

  <div class="horizontal-buttons">
    <ui-button
      [color]="'green'"
      [type]="'confirm'"
      style="width: 40%"
      (click)="update()"
    >
    </ui-button>
    <ui-button
      [color]="'red'"
      [type]="'cancel'"
      style="width: 40%"
      (click)="cancel()"
    >
    </ui-button>
  </div>
</div>
<!-- Templates -->

<!-- COST -->
<ng-template #costTemplate let-spell="spell">
  <div class="bold">
    @if (spell.cost === "action") {
      <span>A</span>
    }
    @if (spell.cost === "bonus") {
      <span>B</span>
    }
    @if (spell.cost === "reaction") {
      <span>R</span>
    }
  </div>
</ng-template>

<!-- NAME -->
<ng-template #spellNameTemplate let-spell="spell">
  <div>
    <div class="bold">
      @if (translate.getDefaultLang() == "de") {
        {{ spell.german }}
      } @else {
        {{ spell.english }}
      }
    </div>
    <div class="bold small">
      @if (spell.needsConcentration) {
        <span>{{ "spells.concentrationAbbr" | translate }} | </span>
      }
      @if (spell.needsVerbal) {
        <span>{{ "spells.components.verbal" | translate }} </span>
      }
      @if (spell.needsSomatic) {
        <span>{{ "spells.components.somatic" | translate }} </span>
      }
      @if (spell.needsMaterial) {
        <span>{{ "spells.components.material" | translate }} </span>
      }
      <div></div>
    </div>
  </div>
</ng-template>

<!-- Level -->
<ng-template #spellLevelTemplate let-spell="spell">
  @if (spell.level !== 0) {
    <div class="bold">{{ spell.level }}</div>
  }
  @if (spell.level === 0) {
    <div class="bold">
      {{ "spells.cantrip" | translate }}
    </div>
  }
</ng-template>

<!-- Attack -->
<ng-template #spellAttackTemplate let-spell="spell">
  <div>
    @if (spell.needsSavingThrow) {
      <div>
        <div>
          {{
            "attributesAbbreviations." + spell.savingThrowAttribute | translate
          }}
        </div>
        <div>{{ utils.spellSaveDC }}</div>
      </div>
    } @else if (spell.needsAttackRoll) {
      <div>
        <div>{{ utils.spellAttackModifier }}</div>
      </div>
    } @else {
      <div>-</div>
    }
  </div>
</ng-template>

<!-- Damage/Heal -->
<ng-template #spellDamageTemplate let-spell="spell">
  <div>
    @if (spell.doesDamage) {
      @for (damage of spell.damage; track damage; let index = $index) {
        <div>
          <span>
            {{ damage.diceNumber }}
            {{ "general.dice" | translate }}{{ damage.diceType }}
          </span>
          <span>
            <icon
              [size]="'xs'"
              [type]="'damage'"
              [icon]="damage.damageType"
            ></icon>
          </span>
        </div>
      }
    } @else if (spell.doesHeal) {
      <div class="heal">
        <span
          >{{ spell.heal.diceNumber }} {{ "general.dice" | translate
          }}{{ spell.heal.diceType }}
        </span>
        @if (spell.heal.additionalHeal) {
          <span>+{{ spell.heal.additionalHeal }} </span>
        }
        <span>
          <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
        </span>
      </div>
    } @else {
      <div>-</div>
    }
  </div>
</ng-template>

<!-- Range -->
<ng-template #spellRangeTemplate let-spell="spell">
  <div class="spell-range">
    @if (spell.isRanged) {
      <div>{{ spell.range }} ft.</div>
    }
    @if (!spell.isRanged && spell.range !== 0) {
      <div>
        {{ "spells.touch" | translate }}
      </div>
    }

    @if (spell.hasAreaOfEffect) {
      <div>
        <span
          >{{ spell.length }} ft.
          <img
            style="width: 1rem; height: 1rem; margin-left: 0.125rem"
            [src]="
              'assets/icons/spellIcons/' + spell.areaOfEffectType + '.svg'
            "
        /></span>
      </div>
    }
  </div>
</ng-template>