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

<divider [appearance]="'gold-2'" class="t-0625"></divider>

<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 [width]="'w20'" (click)="close('update')"
    >{{ "buttons.edit" | translate }}
  </ui-button>
  <ui-button [width]="'w20'" (click)="close('delete')"
    >{{ "buttons.delete" | translate }}
  </ui-button>
</div>
