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>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 }}
            {{ "duration." + spell.durationType | translate }}
          </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>Durchmesser</td>
            <td>{{ spell.diameter }}</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 }} {{ "general.dice" | translate
                }}{{ 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>
      @if (spell.isCustom) {
        <button class="delete-button" (click)="delete()">Löschen</button>
      }
    }
  </div>
</div>