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

    <p>{{ ability.shortDescription }}</p>

    <div class="charges-box" *ngIf="ability.charges != 0">
      <span>Aufladungen: </span>
      <span
        *ngFor="let _ of getArray(ability.charges); let chargeIndex = index"
      >
        <input
          [id]="'checkbox' + index + '-' + chargeIndex"
          type="checkbox"
          (click)="$event.stopPropagation()"
          (change)="
            $event.stopPropagation(); handleChangedCharges(index, $event.target)
          "
        />
      </span>
    </div>
  </div>
  }@empty{
  <div
    style="
      text-align: center;
      margin-top: 2rem;
      font-size: 1.25rem;
      font-weight: 500;
    "
  >
    Noch keine Fähigkeit hinzugefügt
  </div>
  }
</div>
