<div class="card-container">
  <div
    class="card-background"
    [style.background-color]="
      'var(--' + spell.school.toLowerCase() + '-background)'
    "
  ></div>
  <div
    class="title"
    [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  >
    @if (translate.getDefaultLang() == "de") {
      {{ spell.german }}
    } @else {
      {{ spell.english }}
    }
  </div>
  <img
    class="spell-image"
    [src]="'assets/images/spells/' + spell.image + '.jpg'"
    (error)="setBackupImage($event)"
    [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
    alt="spell image"
  />
  <div
    class="info"
    [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  >
    <div class="school">{{ "schools." + spell.school | translate }}</div>
    <div
      class="level"
      [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
    >
      {{ spell.level }}
    </div>
  </div>
</div>
