<div class="flex flex-col">
  <p-table [value]="modules" selectionMode="multiple" [(selection)]="selectedModules" class="w-full">
    <ng-template pTemplate="header">
      <tr>
        <th><p-tableHeaderCheckbox></p-tableHeaderCheckbox></th>
        <th>Module Name</th>
        <th>Module Order</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-module>
      <tr>
        <td><p-tableCheckbox [value]="module"></p-tableCheckbox></td>
        <td>{{ module.title }}</td>
        <td>{{ module.moduleOrder }}</td>
      </tr>
    </ng-template>
  </p-table>

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