<app-course-side-bar>
  <div class="p-5 bg-surface-e min-h-screen h-max">
    <div style="padding-bottom: 1.25rem">
      <h1 style="font-size: 2rem;">Member Management</h1>
    </div>
    <div class="flex flex-col gap-5">
      <p-card>
        <ng-template pTemplate="header">
          <div class="w-full flex justify-center items-center" style="padding-left: 1.25rem;padding-top: 1.25rem;">
            <h1 style="font-size: 1.5rem;">Users</h1>
          </div>
        </ng-template>
        <div class="flex flex-col gap-3">
          <div class="flex flex-row">
            <button pButton pRipple type="button" label="Add Members" icon="pi pi-plus" class="p-button-success" (click)="setMemberModalVisibility(true)"></button>
            <button pButton pRipple type="button" label="Remove Members" icon="pi pi-minus" class="p-button-success" (click)="setRemoveMemberModalVisibility(true)"></button>
          </div>

          <p-table [value]="courseMembersNew" styleClass="p-datatable-striped"
                   [tableStyle]="{'min-width': '50rem'}"
                   dataKey="id" editMode="row"
          >
            <ng-template pTemplate="header">
              <tr>
                <th>ID</th>
                <th>Username</th>
                <th>Is Tutor?</th>
                <th>Actions</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex">
              <tr [pEditableRow]="member">
                <td>
                  {{ member?.user?.id}}
                </td>
                <td>
                  {{ member?.user?.username }}
                </td>
                <td>
                  {{ member?.tutor ? 'Yes' : 'No' }}
                </td>
                <td>
                  <div class="flex align-items-center justify-content-center gap-2">
                    <button
                      pButton
                      pRipple
                      type="button"
                      icon="pi pi-pencil"
                      class="p-button-rounded p-button-text"
                      (click)="editCourseMember(member)"
                    ></button>
                  </div>
                </td>
              </tr>
            </ng-template>
          </p-table>

        </div>
      </p-card>
    </div>
  </div>
</app-course-side-bar>

<p-dialog [modal]="true" [(visible)]="isAddMemberModalVisible" (onHide)="addMemberModalCancel()">
  <ng-template pTemplate="content">
    <!-- input box for user search -->
    <!-- picklist of user search and users to add -->
    <p-pickList
      [source]="allUsers"
      [target]="selectedUsers"
      sourceHeader="Available"
      targetHeader="Selected"
      [dragdrop]="true"
      [responsive]="true"
      [sourceStyle]="{ height: '30rem' }"
      [targetStyle]="{ height: '30rem' }"
      filterBy="username"
      sourceFilterPlaceholder="Search by username"
      targetFilterPlaceholder="Search by username"
      breakpoint="1400px">
      <ng-template let-user pTemplate="item">
        <div class="flex flex-row items-center gap-5">
          <span>{{ user.username }}</span>
        </div>
      </ng-template>
    </p-pickList>
  </ng-template>

  <ng-template pTemplate="footer">
    <div class="flex flex-row gap-5">
      <button pButton type="button" label="Cancel" (click)="addMemberModalCancel()"></button>
      <button pButton type="button" label="Create" (click)="addMemberModalSubmit()"></button>
    </div>
  </ng-template>
</p-dialog>

<p-dialog [modal]="true" [(visible)]="isRemoveMemberModalVisible" (onHide)="removeMemberModalCancel()">
  <ng-template pTemplate="content">
    <!-- input box for user search -->
    <!-- picklist of user search and users to add -->
    <p-pickList
      [source]="courseMembers.copyWithin(0, courseMembers.length)"
      [target]="selectedUsers"
      sourceHeader="Enrolled"
      targetHeader="Remove"
      [dragdrop]="true"
      [responsive]="true"
      [sourceStyle]="{ height: '30rem' }"
      [targetStyle]="{ height: '30rem' }"
      filterBy="username"
      sourceFilterPlaceholder="Search by username"
      targetFilterPlaceholder="Search by username"
      breakpoint="1400px">
      <ng-template let-user pTemplate="item">
        <div class="flex flex-row items-center gap-5">
          <span>{{ user.username }}</span>
        </div>
      </ng-template>
    </p-pickList>
  </ng-template>

  <ng-template pTemplate="footer">
    <div class="flex flex-row gap-5">
      <button pButton type="button" label="Cancel" (click)="removeMemberModalCancel()"></button>
      <button pButton type="button" label="Remove" (click)="removeMemberModalSubmit()"></button>
    </div>
  </ng-template>
</p-dialog>
