DNDTools/src/app/shared-components/full-spellcard/full-spellcard.component.html

<div class="full-spellcard-container">
  <div class="full-spellcard">
    <h2 style="text-align: center; margin-top: 1rem">{{ spell.german }}</h2>

    <table class="table table-striped" style="height: 20rem; overflow: auto">
      <thead>
        <tr>
          <th scope="col">Property</th>
          <th scope="col">Value</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Komponenten:</td>
          <td>
            @if(spell.needsVerbal){Verbal} @if(spell.needsSomatic){, Somatic}
            @if(spell.needsMaterial){, Material}
          </td>
        </tr>
        <!-- <tr>
          <td>Benötigt Geste</td>
          <td>{{ spell.needsSomatic }}</td>
        </tr>
        <tr>
          <td>Benötigt materielle Komponente</td>
          <td>{{ spell.needsMaterial }}</td>
        </tr> -->

        <tr>
          <td>Stufe</td>
          <td>{{ spell.level }}</td>
        </tr>
        <tr>
          <td>Kosten</td>
          <td>{{ spell.cost }}</td>
        </tr>
        <tr>
          <td>Kann als Ritual gewirkt werden</td>
          <td>{{ spell.canRitual }}</td>
        </tr>
        <tr>
          <td>Wirkungsdauer</td>
          <td>{{ spell.duration }}</td>
        </tr>

        <tr></tr>
        <tr>
          <td>Benötigt Konzentration</td>
          <td>{{ spell.needsConcentration }}</td>
        </tr>
        <tr>
          <td>Schule</td>
          <td>{{ spell.school }}</td>
        </tr>
        <tr>
          <td>Reichweite</td>
          @if (spell.isRanged){
          <td>{{ spell.range }}</td>
          } @else {
          <td>Berührung</td>
          }
        </tr>
        @if (spell.hasAreaOfEffect){
        <tr>
          <td>Flächeneffekt</td>
          <td>{{ spell.areaOfEffectType }}</td>
        </tr>
        <tr>
          <td>Radius</td>
          <td>{{ spell.radius }}</td>
        </tr>
        } @if (spell.needsAttackRoll){
        <tr>
          <td>Benötigt Angriffswurf</td>
          <td>{{ spell.needsAttackRoll }}</td>
        </tr>

        } @if (spell.needsSavingThrow){
        <tr>
          <td>Benötigt Rettungswurf</td>
          <td>{{ spell.needsSavingThrow }}</td>
        </tr>
        <tr>
          <td>Rettungswurfattribut</td>
          <td>{{ spell.savingThrowAttribute }}</td>
        </tr>
        } @if (spell.doesDamage){
        <tr>
          <td>Schaden</td>
          <td>
            @for(damage of spell.damage; track damage){
            {{ damage.diceNumber }} {{ damage.diceType }}
            {{ damage.damageType }} @if (damage.additionalDamage){ +
            {{ damage.additionalDamage }}}

            <br />
            }
          </td>
        </tr>
        } @if (spell.doesHeal){
        <tr>
          <td>Heilung</td>
          <td>
            {{ spell.heal.diceNumber }} {{ spell.heal.diceType }} @if
            (spell.heal.additionalHeal){ + {{ spell.heal.additionalHeal }}}
          </td>
        </tr>
        }
        <h3>Beschreibung</h3>
        <div [innerHTML]="spell.description_de"></div>
      </tbody>
    </table>
  </div>

  <div class="delete-row">
    @if(isFromDashboard){
    <button class="delete-button" (click)="remove()">Entfernen</button>
    }@else {

    <!-- Add to favorites -->
    <button
      [class]="alreadyInFavorites ? 'disabled add-button' : 'add-button'"
      (click)="alreadyInFavorites ? '' : addToFavorites()"
    >
      @if(alreadyInFavorites){ Bereits in Favoriten} @else{ Zu Favoriten
      hinzufügen }
    </button>
    <!-- Modify spell (only available for custom spells) -->
    @if(spell.isCustom){
    <button class="edit-button" (click)="update()">Anpassen</button>
    }
    <button class="delete-button" (click)="remove()">Entfernen</button>
    <button class="delete-button" (click)="delete()">Löschen</button>
    }
  </div>
</div>