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

<bci-picklist
  [source]="fruits"
  [sourceItemTemplate]="fruitsTemplate"
  [displayProperty]="displayProperty"
  [sourceSorting]="true"
  [targetSorting]="true"
></bci-picklist>

<ng-template #fruitsTemplate let-name="name" let-calories="calories" let-fromOverseas="fromOverseas">
  <div class="item-container">
    <span class="name">{{ name }}</span>
    <div class="stats">
      <span>{{ calories }} calories</span>,&nbsp;<span *ngIf="fromOverseas; else localFruit">from overseas</span>
      <ng-template #localFruit>
        <span>local product</span>
      </ng-template>
    </div>
  </div>
</ng-template>
