<div class="details-title">{{ spell.german }}</div>

<div class="details-scrollcontainer">
  <div class="details-subheading">Beschreibung</div>
  <div class="details-content" [innerHTML]="spell.description_de"></div>

  <div class="details-subheading">Komponenten:</div>
  <div class="details-content-small">
    <span *ngIf="spell.needsVerbal"> Verbal, </span>
    <span *ngIf="spell.needsSomatic"> Geste, </span>
    <span *ngIf="spell.needsMaterial"> Material </span>
  </div>

  <div class="details-subheading">Eigenschaften</div>
  <div class="details-content-small">
    <div *ngIf="spell.canRitual">Kann als Ritual gewirkt werden</div>
    <div *ngIf="spell.needsConcentration">Benötigt Konzentration</div>
    <div>Schule: {{ spell.school }}</div>
  </div>

  <div class="details-subheading">Reichweite</div>
  <div class="details-content-small">
    <div>Reichweite: {{ spell.range }} ft.</div>
    <div *ngIf="spell.hasAreaOfEffect">
      Flächeneffekt: {{ spell.radius }} ft. {{ spell.areaOfEffectType }}
    </div>
  </div>

  <!-- Angriff /Rettungswurf -->

  <div class="details-subheading">Effekte</div>
  <div class="details-content-small">
    <div *ngIf="spell.needsSavingThrow">
      <div class="details-value">{{ modifiers.saveDC }}</div>
      <div class="details-label">
        {{
          spell.savingThrowAttribute
            ? attributeTranslator[spell.savingThrowAttribute]
            : ""
        }}
      </div>
    </div>
    <div *ngIf="spell.needsAttackRoll">
      Anfgriffsmodifikator: {{ modifiers.attackBonus }}
    </div>
    <ng-container *ngIf="spell.doesDamage">
      Schaden:
      <div *ngFor="let damage of spell.damage">
        {{ damage.diceNumber }} {{ damage.diceType }}
        {{ damage.additionalDamage }} {{ damage.damageType }}
      </div>
    </ng-container>
  </div>
</div>

<div class="vertical-button-wrapper-3">
  <ui-button
    [type]="'edit'"
    [size]="'xlarge'"
    [color]="'primary'"
    (click)="close('update')"
  ></ui-button>
  <ui-button
    [type]="'delete'"
    [size]="'xlarge'"
    [color]="'primary'"
    (click)="close('delete')"
  ></ui-button>
  <ui-button
    [type]="'cancel'"
    [size]="'xlarge'"
    [color]="'primary'"
    (click)="close('cancel')"
  ></ui-button>
</div>
