DNDTools/src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.html

<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">{{ "cost." + ability.cost | translate }}</div>
        </div>

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

        <div class="charges-box" *ngIf="ability.charges != 0">
          {{ "abilities.uses" | translate }}
          @if (ability.charges > 9) {
            <div class="usage-box">
              <icon-button
                [icon]="'remove'"
                [disabled]="ability.currentlyUsedCharges === ability.charges"
                (click)="addUsage(index); $event.stopPropagation()"
              ></icon-button>
              <div class="usage">
                {{ ability.charges - ability.currentlyUsedCharges }}/{{
                  ability.charges
                }}
              </div>
              <icon-button
                [icon]="'add'"
                [disabled]="ability.currentlyUsedCharges === 0"
                (click)="removeUsage(index); $event.stopPropagation()"
              ></icon-button>
            </div>
          } @else {
            @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">{{ "abilities.empty" | translate }}</div>
    }
  </div>
  <div class="footer">
    <ui-button
      [color]="'green'"
      [type]="'add'"
      style="width: 80%"
      (click)="openModal(false)"
    >
    </ui-button>
  </div>
</div>