<app-modal id="partial-collection-modal">
  <div class="modal-wrapper">
    <div class="header">
      <lib-icon (click)="closeDialog()" class="close-icon" height="21px" name="close" alt="close"></lib-icon>
    </div>
    <div class="title align-center">
      <span>{{ title }}</span>
    </div>
    <hr class="line" />
    <div id="scrolling-container" class="body-content" (scroll)="scrollHandler()">
      <ng-container *ngFor="let item of products; last as last; let i = index">
        <div class="item">
          <img src="{{ item.product.ean | bookImageUrl | async }}" alt="book" class="thumbnail" />
          <div class="order-details">
            <span class="title">{{ item.product.contributors }} - {{ item.product.name }}</span>
            <div class="labels">
              <span class="label">Abholfach-Nr.</span>
              <span class="label">Abholfrist</span>
            </div>
            <div class="data">
              <span class="text">{{ compartmentCode }}</span>
              <span class="text" *ngIf="item.subsetItems && item.subsetItems[0].data && item.subsetItems[0].data.compartmentStop">{{
                item.subsetItems[0].data.compartmentStop | date: 'dd.MM.yyyy'
              }}</span>
            </div>
          </div>
          <span class="price" *ngIf="item.grossPrice && item.grossPrice.value"
            >{{ item.grossPrice.value.value | bookPrice }}
            {{ item.grossPrice.value.currency }}
          </span>
          <app-dropdown
            [selected]="getSelectedCollectOptions(item.orderItemNumber)"
            [options]="getCollectOptions(item.orderItemNumber)"
            (valueChanges)="updateQuantity($event, item.orderItemNumber)"
            [floating]="true"
            [scrollable]="true"
            [index]="i + 1"
            class="dropdown"
            #quantityDD
          ></app-dropdown>
        </div>
        <hr class="line" />
      </ng-container>
    </div>
    <div class="overview-price-container">
      <span class="error" *ngIf="error">{{ errorMessage }}</span>
      <span class="overview-price" *ngIf="sum > 0">Zwischensumme {{ sum | bookPrice }} EUR</span>
      <span class="overview-price" *ngIf="sum === 0">Zwischensumme 0,00 EUR</span>
    </div>
    <div class="modal-footer">
      <app-button [primary]="true" (action)="itemsConfirmed()" [disabled]="error">Status auf 'abgeholt' setzen </app-button>
    </div>
  </div>
</app-modal>
