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
      [color]="'green'"
      [type]="'edit'"
      style="width: 80%"
      (click)="openModal()"
    >
    </ui-button>
  </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>
</div>