<div class="flex flex-col">
  <p-table [value]="items" selectionMode="multiple" [(selection)]="selectedItems" class="w-full">
    <ng-template pTemplate="header">
      <tr>
        <th><p-tableHeaderCheckbox></p-tableHeaderCheckbox></th>
        <th>Name</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-module>
      <tr>
        <td><p-tableCheckbox [value]="module"></p-tableCheckbox></td>
        <td>{{ module?.assignment?.name || module?.assignment?.id || ""}}</td>

      </tr>
    </ng-template>
  </p-table>

  <div class="flex justify-end mt-4 gap-4">
    <button pButton type="button" label="{{selectedItems.length <= 1 ? 'Select Item' : 'Select Items'}}{{selectedItems.length > 1 ? ' (' + selectedItems.length + ')' : ''}}" icon="pi pi-check" (click)="confirmSelection()" [disabled]="selectedItems.length == 0"></button>
    <button pButton type="button" label="Cancel" icon="pi pi-times" (click)="cancel()"></button>
  </div>
</div>
