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

<div class="spell-box">
  <div class="heading-list">
    <div>Typ</div>
    <div>Name</div>
    <div>Stufe</div>
    <div>
      <div>Bonus/</div>
      <div>Save</div>
    </div>
    <div>Schaden/ Heilung</div>
    <div>Reichweite</div>
  </div>
  <div
    id="spells-table"
    cdkDropList
    class="example-list table-content"
    (cdkDropListDropped)="dropSpells($event)"
  >
    <div
      class="example-box"
      *ngFor="let spell of spells; let index = index"
      cdkDrag
      (click)="showFullSpellcard(index)"
    >
      <!--  Range Icon -->
      <ng-container
        [ngTemplateOutlet]="distanceIconTemplate"
        [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>
  </div>
  <input
    id="typeahead-basic"
    type="text"
    [class]="showInput ? 'spellInput' : 'spellInput hidden'"
    (selectItem)="onSpellSelect($event.item); $event.preventDefault()"
    [(ngModel)]="newSpellName"
    [ngbTypeahead]="search"
    placement="top-start"
    placeholder="Name des vorbereiteten Zaubers"
  />
  <button
    [class]="showInput ? 'slide-button cancel-button' : 'slide-button'"
    (click)="toggleInput()"
  >
    @if(showInput){ Abbrechen} @else { Hinzufügen}
  </button>
</div>

<!-- Templates -->

<!-- ICON -->
<ng-template #distanceIconTemplate let-spell="spell">
  <icon
    [size]="'s'"
    [type]="'weapon'"
    [icon]="spell.isRanged ? 'distance' : 'touch'"
  ></icon>
</ng-template>

<!-- NAME -->
<ng-template #spellNameTemplate let-spell="spell">
  <div>
    <div class="bold">{{ spell.name }}</div>
    <div class="bold small">
      <span *ngIf="spell.cost === 'action'">A</span>
      <span *ngIf="spell.cost === 'bonus'">B</span>
      <span *ngIf="spell.cost === 'reaction'">R</span>
      <span> | </span>
      <span *ngIf="spell.needsConcentration">C | </span>
      <span *ngIf="spell.needsVerbal">V </span>
      <span *ngIf="spell.needsSomatic">G </span>
      <span *ngIf="spell.needsMaterial">M </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">Trick</div>
</ng-template>

<!-- Attack -->
<ng-template #spellAttackTemplate let-spell="spell">
  <div>
    <div *ngIf="spell.needsSavingThrow">
      <div>
        {{ attributes[spell.savingThrowAttribute!] }}
      </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 }} {{ damage.diceType }} </span>
      <span>
        <icon [size]="'xs'" [type]="'damage'" [icon]="damage.damageType"></icon>
      </span>
    </div>
    } @if(spell.doesHeal){
    <div class="heal">
      <span>{{ spell.heal.diceNumber }} {{ 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">5 ft.</div>

    <div *ngIf="spell.hasAreaOfEffect">
      <span>{{ spell.radius }} ft. {{ areas[spell.areaOfEffectType] }} </span>
    </div>
  </div>
</ng-template>