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

<div class="picklist-container flex-column">
  <!-- Source/target headers -->
  <div class="title flex-none flex-row">
    <div class="source-title-container">
      <ng-content select="[bciPicklistSourceHeader]"></ng-content>
    </div>
    <div class="spacer"></div>
    <div class="target-title-container">
      <ng-content select="[bciPicklistTargetHeader]"></ng-content>
    </div>
  </div>

  <div class="content flex-grow flex-column">
    <div class="filters-container flex-none flex-row" *ngIf="!disableSourceFilter || !disableTargetFilter">
      <!-- Source filter -->
      <ng-container *ngIf="!disableSourceFilter; else noFilterTemplate">
        <mat-form-field
          *ngIf="!sourceFilterTemplate; else customSourceFilter"
          [class.hidden]="disableSourceFilter"
          class="filter-form-field flex-grow flex-fill"
          floatLabel="always"
        >
          <mat-label>{{ picklistIntl.sourceFilterPlaceholder }}</mat-label>
          <input matInput #availableFilter (keyup)="sourceFilterKeyup.emit(availableFilter.value)" />
          <mat-icon matSuffix fontIcon="Bosch-Ic-search"></mat-icon>
        </mat-form-field>
        <ng-template #customSourceFilter>
          <ng-container *ngTemplateOutlet="sourceFilterTemplate"></ng-container>
        </ng-template>
      </ng-container>
      <div class="spacer"></div>
      <!-- Target filter -->
      <ng-container *ngIf="!disableTargetFilter; else noFilterTemplate">
        <mat-form-field
          *ngIf="!targetFilterTemplate; else customTargetFilter"
          [class.hidden]="disableTargetFilter"
          class="filter-form-field flex-grow flex-fill"
          floatLabel="always"
        >
          <mat-label>{{ picklistIntl.targetFilterPlaceholder }}</mat-label>
          <input matInput #selectedFilter (keyup)="targetFilterKeyup.emit(selectedFilter.value)" />
          <mat-icon matSuffix fontIcon="Bosch-Ic-search"></mat-icon>
        </mat-form-field>
        <ng-template #customTargetFilter>
          <ng-container *ngTemplateOutlet="targetFilterTemplate"></ng-container>
        </ng-template>
      </ng-container>
      <ng-template #noFilterTemplate>
        <!-- Empty placeholder required otherwise flex layout will break -->
        <div class="flex-grow flex-fill"></div>
      </ng-template>
    </div>

    <div class="lists-container flex-grow flex-row flex-layout-start-stretch" cdkDropListGroup>
      <!-- Source list -->
      <bci-drag-drop-list
        class="flex-grow"
        responsibility="source"
        [manualSorting]="false"
        [itemTemplate]="sourceItemTemplate"
        [(dragInstance)]="dragState"
        [dropOverlayPlaceholder]="picklistIntl.dropPlaceholder"
      ></bci-drag-drop-list>
      <div class="arrow-buttons flex-column flex-65 flex-layout-center-center">
        <button
          [disabled]="!isSomeSourceItemSelected || wouldSourceSelectionExceedTargetItemsMaxLimit"
          mat-icon-button
          (click)="onAddSelected()"
          [matTooltip]="picklistIntl.addSelection"
          data-test="picklist-add-selection-button"
        >
          <mat-icon class="Bosch-Ic-arrow-expand-right arrow-icon"></mat-icon>
        </button>
        <button
          [disabled]="!isSomeTargetItemSelected"
          mat-icon-button
          (click)="onRemoveSelected()"
          [matTooltip]="picklistIntl.removeSelection"
          data-test="picklist-remove-selection-button"
        >
          <mat-icon fontIcon="Bosch-Ic-arrow-expand-left"></mat-icon>
        </button>
        <button
          [disabled]="isAddAllButtonDisabled()"
          mat-icon-button
          (click)="onAddAll()"
          [matTooltip]="picklistIntl.addAll"
          data-test="picklist-add-all-button"
        >
          <mat-icon class="Bosch-Ic-arrow-expand-double-right arrow-icon"></mat-icon>
        </button>
        <button
          [disabled]="!isTargetItemsAvailable"
          mat-icon-button
          (click)="onRemoveAll()"
          [matTooltip]="picklistIntl.removeAll"
          data-test="picklist-remove-all-button"
        >
          <mat-icon class="Bosch-Ic-arrow-expand-double-left arrow-icon"></mat-icon>
        </button>
      </div>
      <!-- Target list -->
      <bci-drag-drop-list
        class="flex-grow"
        responsibility="target"
        [manualSorting]="manualTargetSorting"
        [(dragInstance)]="dragState"
        [itemTemplate]="targetItemTemplate"
        [dropSelfDisabled]="dropSelfTargetDisabled"
        [dropOverlayPlaceholder]="picklistIntl.dropPlaceholder"
      ></bci-drag-drop-list>
    </div>

    <div class="selection-buttons flex-none flex-row">
      <div class="flex-row-wrap flex-1">
        <a
          class="selection-link-button"
          [ngClass]="{ disabled: !isSourceItemsAvailable }"
          (click)="onSelectAll('source')"
        >
          {{ picklistIntl.selectAll }}
        </a>
        <a
          class="selection-link-button"
          [ngClass]="{ disabled: !isSomeSourceItemSelected }"
          (click)="onDeselectAll('source')"
        >
          {{ picklistIntl.deselectAll }}
        </a>
      </div>
      <div class="spacer"></div>
      <div class="flex-row-wrap flex-1">
        <a
          class="selection-link-button"
          [ngClass]="{ disabled: !isTargetItemsAvailable }"
          (click)="onSelectAll('target')"
        >
          {{ picklistIntl.selectAll }}
        </a>
        <a
          class="selection-link-button"
          [ngClass]="{ disabled: !isSomeTargetItemSelected }"
          (click)="onDeselectAll('target')"
        >
          {{ picklistIntl.deselectAll }}
        </a>
      </div>
    </div>
  </div>
</div>
