<ng-container
  *ngIf="unfilteredCount$ | ngrxPush as unfilteredCount; else noRevisions">
  <nz-row [nzGutter]="16">
    <nz-col nzSpan="18">
      <nz-space nzDirection="vertical">
        <cvc-revision-list
          [revisions]="revisions$ | ngrxPush"
          (revisionSetSelectedEvent)="onRevisionSetSelected($event)"
          (revisionMutationCompleted)="refresh()"
          [refetchQueries]="refetchQueries"
          *nzSpaceItem></cvc-revision-list>
        <ng-container *ngrxLet="pageInfo$ as pageInfo">
          <ng-container
            *ngIf="pageInfo && pageInfo?.hasNextPage && pageInfo.endCursor">
            <button
              nz-button
              nzBlock
              nzType="default"
              (click)="loadMore(pageInfo?.endCursor)"
              *nzSpaceItem>
              Load More
            </button>
          </ng-container>
        </ng-container>
      </nz-space>
    </nz-col>
    <nz-col nzSpan="6">
      <!-- TODO: Evaluate the need for this nz-space -->
      <nz-space
        nzDirection="vertical"
        *ngIf="filteredSet">
        <nz-row *nzSpaceItem>
          <nz-tag
            nzMode="closeable"
            (nzOnClose)="onSetFilterClearClicked()"
            >Group: {{ filteredSet }}</nz-tag
          >
        </nz-row>
      </nz-space>
      <cvc-participant-list
        listTitle="Filter by Revision Status"
        [preselectedOption]="preselectedRevisionStatus"
        [participantList]="selectableStatuses"
        (participantSelectedEvent)="onStatusSelected($event)">
        <ng-template
          #itemTemplate
          let-status>
          <span>{{ status.displayName }}</span>
        </ng-template>
      </cvc-participant-list>
      <cvc-participant-list
        listTitle="Filter by Revisor"
        [participantList]="(uniqueRevisors$ | ngrxPush) || []"
        (participantSelectedEvent)="onRevisorSelected($event)">
        <ng-template
          #itemTemplate
          let-user>
          <nz-avatar
            *ngIf="user.profileImagePath; else noAvatar"
            nz-comment-avatar
            [nzSrc]="user.profileImagePath">
          </nz-avatar>
          <ng-template #noAvatar>
            <nz-avatar
              nz-comment-avatar
              [nzText]="user.username.charAt(0) | uppercase"></nz-avatar>
          </ng-template>
          <span>{{ user.username }}</span>
        </ng-template>
      </cvc-participant-list>
      <cvc-participant-list
        listTitle="Filter by Field"
        [participantList]="(revisionFields$ | ngrxPush) || []"
        (participantSelectedEvent)="onFieldNameSelected($event)">
        <ng-template
          #itemTemplate
          let-field>
          <span>{{ field.displayName }}</span>
        </ng-template>
      </cvc-participant-list>
      <cvc-participant-list
        listTitle="Filter by Resolver"
        [participantList]="(uniqueResolvers$ | ngrxPush) || []"
        (participantSelectedEvent)="onResolverSelected($event)">
        <ng-template
          #itemTemplate
          let-user>
          <nz-avatar
            *ngIf="user.profileImagePath; else noAvatar"
            nz-comment-avatar
            [nzSrc]="user.profileImagePath">
          </nz-avatar>
          <ng-template #noAvatar>
            <nz-avatar
              nz-comment-avatar
              [nzText]="user.username.charAt(0) | uppercase"></nz-avatar>
          </ng-template>
          <span>{{ user.username }}</span>
        </ng-template>
      </cvc-participant-list>
    </nz-col>
  </nz-row>
</ng-container>
<ng-template #noRevisions>
  <ng-container *ngIf="isLoading$ | ngrxPush as isLoading; else noneFound">
    <nz-row nzJustify="center">
      <i
        nz-icon
        nzType="loading"
        style="font-size: 32px"></i>
    </nz-row>
  </ng-container>
  <ng-template #noneFound>
    <nz-empty
      nzNotFoundImage="simple"
      nzNotFoundContent="Entity has no Revisions"></nz-empty>
  </ng-template>
</ng-template>
