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

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

<div class="details-cost-charge">
  <div class="details-cost">{{ "time." + ability!.cost | translate }}</div>

  <div class="details-charges">
    {{ "abilities.uses" | translate }} {{ ability?.charges }}
  </div>
</div>

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