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

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

        @if (ability.charges != 0) {
          <div class="charges-box t-05">
            {{ "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 style="width: 60%" (click)="openModal(false)"
      >{{ "buttons.add" | translate }}
    </ui-button>
  </div>
</div>