<div class="ability-box">
  <div cdkDropList class="item-list" (cdkDropListDropped)="drop($event)">
    <!-- ITEMS -->
    @for(ability of abilities; let index = $index; track ability){
    <div
      class="item"
      [class]="
        ability.currentlyUsedCharges === ability.charges &&
        ability.charges !== 0
          ? 'used'
          : ''
      "
      (click)="openDetailsPanel(index)"
      cdkDrag
    >
      <div class="header">
        <div class="name">{{ ability.name }}</div>
        <div class="cost">{{ costTranslator[ability.cost] }}</div>
      </div>

      <p [innerHTML]="ability.shortDescription"></p>

      <div class="charges-box" *ngIf="ability.charges != 0">
        Nutzungen: @for(_ of getArray(ability.charges); let chargeIndex =
        $index; track _){
        <input
          [id]="'checkbox' + index + '-' + chargeIndex"
          type="checkbox"
          (click)="$event.stopPropagation()"
          (change)="
            $event.stopPropagation(); handleChangedCharges(index, $event.target)
          "
        />
        }
      </div>
    </div>
    }@empty{
    <div class="empty-list">Noch keine Fähigkeit hinzugefügt</div>
    }
  </div>
  <div class="footer">
    <ui-button [color]="'green'" style="width: 80%" (click)="openModal(false)">
      Hinzufügen
    </ui-button>
  </div>
</div>
