<div class="workbasket-list">
  <!-- TOOLBAR -->
  <section #wbToolbar class="workbasket-list__toolbar">
    <taskana-administration-workbasket-list-toolbar [workbaskets]="workbasketsSummary$ | async"
      (performSorting)="performSorting($event)" [workbasketDefaultSortBy]="workbasketDefaultSortBy" [workbasketListExpanded]="expanded">
    </taskana-administration-workbasket-list-toolbar>
  </section>

  <!-- WORKBASKET LIST -->
  <div class="workbasket-list__workbaskets" *ngIf="((workbasketsSummary$ | async) && (workbasketsSummary$ | async)?.length > 0) else empty_workbaskets">
    <mat-selection-list #workbasket [multiple]="false">
      <mat-list-option class="workbasket-list__workbaskets-item"
                       *ngFor="let workbasket of (workbasketsSummary$ | async)"
                       (click)="selectWorkbasket(workbasket.workbasketId)"
                       [selected]="workbasket.workbasketId == selectedId"
                       [value]="workbasket.workbasketId">
        <div class="workbaskets-item__wrapper">

          <div class="workbaskets-item__icon" *ngIf="expanded">
            <taskana-administration-icon-type [type]="workbasket.type" size="large" tooltip="true" [selected]="workbasket.workbasketId === selectedId"></taskana-administration-icon-type>
          </div>

          <div class="workbaskets-item__info">
            <p>
              <b>{{workbasket.name}}</b>, <i>{{workbasket.key}} </i>
            </p>
            <p style="max-height: 20px; overflow: hidden; text-overflow: ellipsis">{{workbasket.description}} &nbsp;</p>
            <p>{{workbasket.owner}} &nbsp;</p>
          </div>

          <div class="workbaskets-item__marked"  *ngIf="workbasket.markedForDeletion">
            <span title="Marked for deletion" data-toggle="tooltip" class="material-icons md-20 {{workbasket.workbasketId === selectedId ? 'white': 'red' }} ">error</span>
          </div>
        </div>

        <mat-divider></mat-divider>

      </mat-list-option>
    </mat-selection-list>
  </div>


  <!-- SPINNER and EMPTY WORKBASKET LIST -->
  <ng-template #empty_workbaskets>
    <div *ngIf="!requestInProgress && !requestInProgressLocal" class="workbasket-list__no-items">
      <h3 class="grey">There are no workbaskets</h3>
    </div>
  </ng-template>
</div>

<!-- PAGINATION -->

<taskana-shared-pagination
        [page]="(workbasketsSummaryRepresentation$ | async) ? (workbasketsSummaryRepresentation$ | async)?.page : (workbasketsSummaryRepresentation$ | async)"
        [type]="type"
        [expanded]="expanded"
        [numberOfItems]="(workbasketsSummary$ | async)?.length"
        (changePage)="changePage($event)">
</taskana-shared-pagination>
