<div class="hits" *ngIf="shippingDocument && shippingDocument.products && shippingDocument.products.length > 0">
  <span>{{ shippingDocument.products.length }} Titel</span>
</div>
<div class="shipping-document-container" *ngIf="shippingDocument">
  <div class="header">
    <div class="remove-shipping-document">
      <app-button (action)="deleteShippingDocument()" alignRight="true">Löschen</app-button>
    </div>
    <div class="title-id">
      <span class="title">Warenbegleitschein</span>
      <span class="shipping-document-id">#{{ shippingDocument.shippingDocumentNumber | packageNumberParser }}</span>
    </div>
    <div class="supplier">
      <span class="label">Lieferant</span>
      <span class="value">{{ selectedSupplier }}</span>
    </div>
  </div>
  <hr class="branch" />
  <div class="list" *ngIf="shippingDocument.products.length > 0">
    <ng-container *ngFor="let product of shippingDocument.products; let last = last">
      <app-remission-shipping-document-card
        [remissionProcessId]="remissionProcessId"
        [shippingDocumentId]="shippingDocument.id"
        [product]="product"
        (updateShippingDocument)="updateShippingDocument.emit()"
      ></app-remission-shipping-document-card>
      <hr class="branch" *ngIf="!last" />
    </ng-container>

    <ng-content class="bottom"></ng-content>
  </div>
  <div class="empty-list" *ngIf="shippingDocument.products.length === 0">
    <span>Neue Artikel aus der Remi-Liste hinzufügen</span>
  </div>

  <app-remission-confirm-delete-shipping-document
    #remissionConfirmDeleteDialog
    (confirmDelete)="confirmDeleteShippingDocument()"
  ></app-remission-confirm-delete-shipping-document>
</div>

<!-- add the remove product from the shipping document modal -->
