<div class="dimensions">
  <div class="title">
    {{ spell.german }}
  </div>
  <hr />
  <div class="info">
    <div class="data">
      <div class="data-row">
        <div class="entry">
          <div class="name">{{ "spellmodal.level" | translate }}</div>
          <div class="value">{{ spell.level }}</div>
        </div>
        <div class="entry">
          <div class="name">{{ "spellmodal.cost" | translate }}</div>
          <div class="value">
            {{ spell.timeToCast }} {{ "time." + spell.cost | translate }}
          </div>
        </div>
        <div class="entry">
          <div class="name">{{ "spellmodal.duration" | translate }}</div>
          <div class="value">
            {{ spell.duration }} {{ "time." + spell.durationType | translate }}
          </div>
        </div>
        <div class="entry">
          <div class="name">{{ "spellmodal.components" | translate }}</div>
          <div class="value">
            @if (spell.needsVerbal) {
              {{ "spells.components.verbal" | translate }},
            }
            @if (spell.needsSomatic) {
              {{ "spells.components.somatic" | translate }},
            }
            @if (spell.needsMaterial) {
              {{ "spells.components.material" | translate }}
            }
          </div>
        </div>
      </div>
      <div class="data-row">
        <div class="entry">
          <div class="name">{{ "spellmodal.school" | translate }}</div>
          <div class="value">{{ "schools." + spell.school | translate }}</div>
        </div>
        <div class="entry">
          <div class="name">{{ "spellmodal.mod-save" | translate }}</div>
          <div class="value">
            @if (spell.needsSavingThrow) {
              {{
                "attributesAbbreviations." + spell.savingThrowAttribute
                  | translate
              }}
              {{ saveDC }}
            } @else if (spell.needsAttackRoll) {
              {{ attackBonus }}
            } @else {
              -
            }
          </div>
        </div>
        <div class="entry">
          <div class="name">{{ "spellmodal.effect" | translate }}</div>
          <div class="value">
            <div>
              @if (spell.doesDamage) {
                @for (
                  damage of spell.damage;
                  track damage;
                  let index = $index
                ) {
                  <div>
                    <span>
                      {{ damage.diceNumber }}
                      {{ "general.dice" | translate }}{{ 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 }} {{ "general.dice" | translate
                    }}{{ spell.heal?.diceType }}
                  </span>
                  @if (spell.heal?.additionalHeal) {
                    <span>+{{ spell.heal?.additionalHeal }} </span>
                  }
                  <span>
                    <icon
                      [size]="'xs'"
                      [type]="'damage'"
                      [icon]="'heal'"
                    ></icon>
                  </span>
                </div>
              }
            </div>
          </div>
        </div>
        <div class="entry">
          <div class="name">{{ "spellmodal.range" | translate }}</div>
          @if (spell.isRanged) {
            <div class="value">{{ spell.range }} ft.</div>
          } @else if (spell.range === 0) {
            <div class="value">{{ "spellmodal.self" | translate }}</div>
          } @else if (spell.range === 5) {
            <div class="value">{{ "spellmodal.touch" | translate }}</div>
          }
          @if (spell.hasAreaOfEffect) {
            <div>
              <span
                >{{ spell.length }} ft.
                <img
                  style="width: 1rem; height: 1rem; margin-left: 0.125rem"
                  [src]="
                    'assets/icons/spellIcons/' + spell.areaOfEffectType + '.svg'
                  "
                />
              </span>
            </div>
          }
        </div>
      </div>
    </div>
    <img src="assets/images/spells/chillTouch.jpg" alt="s" />
  </div>
  <hr />
  <div class="description" [innerHTML]="spell.description_de"></div>
</div>

<!-- <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>Ist ein Ritual</td>
          <td>{{ spell.isRitual }}</td>
        </tr>
        <tr>
          <td>Wirkungsdauer</td>
          <td>
            {{ spell.duration }}
            {{ "time." + 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.length }}</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>
      <button
        [class]="alreadyInFavorites ? 'disabled add-button' : 'add-button'"
        (click)="alreadyInFavorites ? '' : addToFavorites()"
      >
        @if (alreadyInFavorites) {
          Bereits in Favoriten
        } @else {
          Zu Favoriten hinzufügen
        }
      </button>
      @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> -->
