<app-sidebar-page-wrapper>
  <div class="lms-page-container flex flex-col gap-5">
    <app-category-tree-view
      [categories]="categories"
      [allowDragAndDrop]="true"
      (categoryReparented)="onCategoryReparented($event)"
      (categoryCreated)="onCategoryCreated($event)"
      (categoryTitleChanged)="onCategoryTitleChanged($event)"
      (categoryDeleted)="onCategoryDeleted($event)"
    ></app-category-tree-view>

    <p-table
      [value]="questions"
      [(selection)]="selectedQuestions"
      [paginator]="true"
      [rows]="pageSize"
      [lazy]="true"
      [totalRecords]="totalRecords || 0"
      (onLazyLoad)="onPageChange($event)"
    >
      <ng-template pTemplate="caption">
        <div class="flex">
          <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear()" />
          <span class="p-input-icon-left ml-auto flex items-center gap-2">
            <button
              pButton
              type="button"
              icon="pi pi-plus"
              label="Create Assignment"
              class="p-button-outlined"
              (click)="createAssignment()"
            ></button>
            <button
              pButton
              type="button"
              icon="pi pi-search"
              class="p-button-text"
              (click)="openSelectCategory()"
            ></button>
          </span>
        </div>
      </ng-template>
      <ng-template pTemplate="header">
        <tr>
          <th style="width: 4rem"><p-tableHeaderCheckbox/></th>
          <th>Title</th>
          <th>Categories</th>
          <th>Actions</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-question>
        <tr>
          <td>
            <p-tableCheckbox [value]="question" />
          </td>
          <td>{{ question.question.title }}</td>
          <td>
            <ng-container *ngIf="question.categoryIds?.length">
              <div *ngFor="let categoryId of question.categoryIds">
                {{ getCategoryPath(categoryId) }}
              </div>
            </ng-container>
            <span *ngIf="!question.categoryIds?.length">-</span>
          </td>
          <td class="flex flex-row gap-3">
            <p-button
              label="View Question"
              (click)="editQuestion(question)"
            ></p-button>
            <p-button
              label="Edit Categories"
              (click)="editQuestionCategories(question)"
            ></p-button>
          </td>
        </tr>
      </ng-template>
    </p-table>
  </div>
</app-sidebar-page-wrapper>
