<div class="details-name">{{ abilities?.name }}</div>

<div class="details-long-description">{{ abilities?.longDescription }}</div>

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

  <div class="details-charges">Aufladungen: {{ abilities?.charges }}</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]="'dismiss'"
    [size]="'xlarge'"
    [color]="'primary'"
    (click)="close('dismiss')"
  ></ui-button>
</div>
