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

    <!-- FILTER BUTTON -->
    <button mat-flat-button class="distribution-targets-list__action-button" (click)="changeToolbarState(!toolbarState)"
    >
      <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 mat-flat-button class="distribution-targets-list__action-button" (click)="selectAll(allSelected);">
      <mat-icon class="button-icon" *ngIf="!allSelected" matTooltip="Deselect all items">check_box</mat-icon>
      <mat-icon class="button-icon" *ngIf="allSelected" matTooltip="Select all items">check_box_outline_blank</mat-icon>
    </button>
  </mat-toolbar>

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

  <!-- WORKBASKET LIST -->
  <div class="{{toolbarState?  'distribution-targets-list__list--with-filter' : 'distribution-targets-list__list--no-filter'}}"
       infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50"
       [scrollWindow]="false" *ngIf="distributionTargets?.length > 0">
    <mat-selection-list #workbasket [multiple]="true">
      <mat-list-option class="workbasket-distribution-targets__workbaskets-item"
                       *ngFor="let workbasket of distributionTargets | orderBy: ['type', 'description']"
                       [selected]="workbasket.selected"
                       (click)="workbasket.selected = !workbasket.selected"
                       [value]="workbasket.workbasketId">
        <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">
            <p>
              <b>{{workbasket.name}}</b>, <i>{{workbasket.key}} </i>
            </p>
            <p>{{workbasket.description}} &nbsp;</p>
            <p>{{workbasket.owner}} &nbsp;</p>
          </div>

          <!-- MARKED FOR DELETION -->
          <div class="workbaskets-item__marked" *ngIf="workbasket.markedForDeletion">
            <span title="Marked for deletion" matTooltip="Marked for deletion"
                  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>

  <div class="distribution-targets-list__empty-list"  *ngIf="distributionTargets?.length == 0">
    There is currently no distributed workbasket
  </div>
</div>
