<!--
  ~ Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<div
  class="drag-drop-list-container"
  [ngClass]="{ source: isSourceList, target: !isSourceList, sortable: manualSorting }"
>
  <cdk-virtual-scroll-viewport [itemSize]="15" class="scroll-viewport">
    <mat-selection-list
      #selectionList
      cdkDropList
      class="item-selection-list"
      [cdkDropListData]="items"
      (cdkDropListDropped)="onDrop($event)"
    >
      <mat-list-option
        *ngFor="let elem of items"
        #option
        class="item"
        [selected]="elem.selected"
        cdkDrag
        [cdkDragData]="elem"
        (cdkDragStarted)="onDragStarted($event)"
        (cdkDragEnded)="onDragEnded($event)"
        checkboxPosition="before"
        [ngClass]="{ selected: elem.selected, dragging: elem.dragging }"
        (dblclick)="onDoubleClick(elem)"
        (click)="onSelectionChange(option.selected, elem)"
      >
        <span class="item-label" *ngIf="!itemTemplate; else customTemplate">
          {{ elem.label }}
        </span>
        <ng-template #customTemplate>
          <ng-container *ngTemplateOutlet="itemTemplate; context: getItemContext(elem.value)"></ng-container>
        </ng-template>

        <div *cdkDragPreview class="drag-preview-container">
          <mat-selection-list class="item-selection-list">
            <mat-list-option
              *ngFor="let elem of selectedPreviewItems()"
              class="item"
              [selected]="true"
              checkboxPosition="before"
            >
              <span *ngIf="!itemTemplate">
                {{ elem.label }}
              </span>
              <ng-container *ngIf="itemTemplate">
                <ng-container *ngTemplateOutlet="itemTemplate; context: getItemContext(elem.value)"></ng-container>
              </ng-container>
            </mat-list-option>
            <mat-list-item class="item" checkboxPosition="before" *ngIf="remainingPreviewItems() > 0">
              <span>{{ picklistIntl.dragPreviewItemLabel(remainingPreviewItems()) }}</span>
            </mat-list-item>
          </mat-selection-list>
        </div>
        <div *cdkDragPlaceholder class="drag-placeholder"></div>
      </mat-list-option>
    </mat-selection-list>
  </cdk-virtual-scroll-viewport>
  <div
    class="drop-zone-overlay flex-column flex-layout-center-center"
    [ngClass]="{ active: highlightDropArea, empty: !highlightDropArea && items.length === 0 }"
  >
    <ng-container *ngIf="items.length === 0">
      <mat-icon fontIcon="Bosch-Ic-arrow-down-circle" class="overlay-icon"></mat-icon>
      {{ dropOverlayPlaceholder }}
    </ng-container>
  </div>
</div>
