<div class="distribution-targets-list">
  <mat-toolbar>
    <span class="distribution-targets-list__header" matTooltip="{{header}}">{{header}}</span>

    <!-- FILTER BUTTON -->
    <button (click)="changeToolbarState(!toolbarState)"
            class="distribution-targets-list__action-button" mat-flat-button
    >
      <span *ngIf="!toolbarState">
        Display filter
        <mat-icon class="button-icon">filter_list</mat-icon>
      </span>
      <span *ngIf="toolbarState">
        Hide filter
        <mat-icon class="button-icon">keyboard_arrow_up</mat-icon>
      </span>
    </button>

    <span style="flex: 1 1 auto"> </span>

    <!-- SELECT ALL BUTTON -->
    <button (click)="selectAll(!allSelected);" class="distribution-targets-list__action-button"
            mat-flat-button>
      <mat-icon *ngIf="allSelected" class="button-icon" matTooltip="Deselect all items">check_box
      </mat-icon>
      <mat-icon *ngIf="!allSelected" class="button-icon" matTooltip="Select all items">
        check_box_outline_blank
      </mat-icon>
    </button>
  </mat-toolbar>

  <!-- FILTER COMPONENT -->
  <taskana-shared-workbasket-filter *ngIf="toolbarState" [component]="component"
                                    isExpanded="true"></taskana-shared-workbasket-filter>

  <!-- EMPTY LIST -->
  <div *ngIf="distributionTargets?.length == 0 && requestInProgress < 0"
       class="distribution-targets-list__empty-list">

    <!-- AVAILABLE SIDE -->
    <div *ngIf="side === 0" style="padding: 0 16px;">
      There are currently no Workbaskets for distribution
    </div>

    <!-- SELECTED SIDE -->
    <div *ngIf="side === 1" style="padding: 0 16px;">
      There is currently no distributed Workbasket
    </div>

  </div>

  <!-- WORKBASKET LIST -->
  <mat-selection-list #workbasket [multiple]="true">
    <cdk-virtual-scroll-viewport #scroller
                                 class="{{toolbarState?  'distribution-targets-list__list--with-filter' : 'distribution-targets-list__list--no-filter'}}"
                                 itemSize="90">
      <mat-list-option
          (click)="updateSelectAll(!workbasket.selected) && (workbasket.selected = !workbasket.selected)"
          *cdkVirtualFor="let workbasket of distributionTargets| orderBy: ['name']; templateCacheSize: 0"
          [selected]="workbasket.selected"
          [value]="workbasket.workbasketId"
          class="workbasket-distribution-targets__workbaskets-item">

        <div class="distribution-targets-list__item-wrapper">

          <!-- ICON -->
          <div class="distribution-targets-list__item-icon">
            <taskana-administration-icon-type [type]="workbasket.type" size="large"
                                              tooltip="true"></taskana-administration-icon-type>
          </div>

          <!-- INFO -->
          <div class="distribution-targets-list__item-info">
            <div class="distribution-targets-list__item--no-wrap">
              <b>{{workbasket.name}}</b>, <i>{{workbasket.key}}</i>
            </div>
            <p class="distribution-targets-list__item--no-wrap">{{workbasket.description}}</p>
            <p class="distribution-targets-list__item--no-wrap">{{workbasket.owner}}</p>
          </div>

          <!-- MARKED FOR DELETION -->
          <div *ngIf="workbasket.markedForDeletion" class="workbaskets-item__marked">
            <span
                class="material-icons md-20 red "
                matTooltip="Marked for deletion"
                title="Marked for deletion">error</span>
          </div>
        </div>

        <mat-divider></mat-divider>

      </mat-list-option>
    </cdk-virtual-scroll-viewport>
  </mat-selection-list>


</div>
