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">
    <span *ngIf="spell.cost === 'action'">A</span>
    <span *ngIf="spell.cost === 'bonus'">B</span>
    <span *ngIf="spell.cost === 'reaction'">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">
      <span *ngIf="spell.needsConcentration"
        >{{ "spells.concentrationAbbr" | translate }} |
      </span>
      <span *ngIf="spell.needsVerbal"
        >{{ "spells.components.verbal" | translate }}
      </span>
      <span *ngIf="spell.needsSomatic"
        >{{ "spells.components.somatic" | translate }}
      </span>
      <span *ngIf="spell.needsMaterial"
        >{{ "spells.components.material" | translate }}
      </span>
      <div></div>
    </div>
  </div>
</ng-template>

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

<!-- Attack -->
<ng-template #spellAttackTemplate let-spell="spell">
  <div>
    <div *ngIf="spell.needsSavingThrow">
      <div>
        {{
          "attributesAbbreviations." + spell.savingThrowAttribute | translate
        }}
      </div>
      <div>{{ spellSaveDC }}</div>
    </div>
    <div *ngIf="spell.needsAttackRoll">
      <div>{{ spellAttackBonus }}</div>
    </div>
    <div *ngIf="!spell.needsSavingThrow && !spell.needsAttackRoll">-</div>
  </div>
</ng-template>

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

<!-- Range -->
<ng-template #spellRangeTemplate let-spell="spell">
  <div class="spell-range">
    <div *ngIf="spell.isRanged">{{ spell.range }} ft.</div>
    <div *ngIf="!spell.isRanged">{{ "spells.touch" | translate }}</div>

    <div *ngIf="spell.hasAreaOfEffect">
      <span
        >{{ spell.radius }} ft.
        {{ "areaTypes." + spell.areaOfEffectType | translate }}</span
      >
    </div>
  </div>
</ng-template>