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

<div class="spell-box">
  <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
    id="spells-table"
    cdkDropList
    class="item-list table-content"
    (cdkDropListDropped)="dropSpells($event)"
  >
    @for (spell of spells; let index = $index; track spell) {
      <div class="item" cdkDrag (click)="showFullSpellcard(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;
        "
      >
        {{ "spells.empty" | translate }}
      </div>
    }
  </div>
  <div class="footer">
    <ui-button style="width: 60%" (click)="openModal()"
      >{{ "buttons.edit" | translate }}
    </ui-button>
  </div>

  <!-- Templates -->

  <!-- COST -->
  <ng-template #costTemplate let-spell="spell">
    <div class="bold">
      @if (spell.cost === "action") {
        <span>A</span>
      } @else if (spell.cost === "bonus") {
        <span>B</span>
      } @else if (spell.cost === "reaction") {
        <span>R</span>
      } @else {
        <img src="assets/icons/UIIcons/time.svg" alt="time" />
      }
    </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>
      } @else if (spell.range === 0) {
        <div>
          {{ "spells.self" | translate }}
        </div>
      } @else if (spell.range === 5) {
        <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>
</div>