<div class="spell-box">
  <div class="heading-list">
    <div>Kosten</div>
    <div>Name</div>
    <div>Stufe</div>
    <div>Bonus</div>
    <div>Effekt</div>
    <div>Reichweite</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;
      "
    >
      Noch keine Zauber hinzugefügt
    </div>
    }
  </div>
  <div class="footer">
    <ui-button [color]="'green'" style="width: 80%" (click)="openModal()">
      Bearbeiten
    </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 action'">B</span>
      <span *ngIf="spell.cost === 'reaction'">R</span>
    </div>
  </ng-template>

  <!-- NAME -->
  <ng-template #spellNameTemplate let-spell="spell">
    <div>
      <div class="bold">{{ spell.german }}</div>
      <div class="bold small">
        <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">Berührung</div>

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