<div class="title">{{ ability?.name }}</div>

<div class="content" [innerHTML]="ability?.longDescription"></div>

<div class="details-cost-charge">
  <div class="details-cost">{{ costTranslator[ability!.cost] }}</div>

  <div class="details-charges">Aufladungen: {{ ability?.charges }}</div>
</div>

<div class="vertical-buttons bottom">
  <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">
    Anpassen
  </ui-button>
  <ui-button [color]="'red'" [width]="'w20'" (click)="close('delete')">
    Löschen
  </ui-button>
</div>
