<ng-container *ngIf="!(isLoading | async); else loading">
  <div
    class="scroll-container"
    *ngIf="remissionProcess$ | async as remissionProcess"
  >
    <ng-container *ngIf="shippingDocument$ | async as shippingDocument">
      <div class="container">
        <div class="card-wrapper">
          <ng-container [ngSwitch]="shippingDocumentCompleted$ | async">
            <div class="button-wrapper" *ngSwitchCase="false">
              <app-button
                (action)="deleteShippingDocument()"
                [alignRight]="true"
                >Löschen</app-button
              >
            </div>

            <div
              class="button-wrapper"
              *ngSwitchDefault
              [class.hide]="
                !isSupplierActivatedForPrinting(
                  remissionProcess?.filter?.target
                )
              "
            >
              <app-button
                [alignRight]="true"
                [disabled]="!!(isPrinting | async)"
                (action)="openPrintSelection()"
                >Drucken</app-button
              >
            </div>
          </ng-container>

          <div class="header">
            <div class="title">Warenbegleitschein</div>
            <div class="title">
              #{{
                remissionProcess.shippingDocuments[0].shippingDocumentNumber
                  | shippingDocumentNumberFormatter
                  | packageNumberParser
              }}
            </div>
          </div>

          <app-remissions-overview-card-content
            [isCompleted]="shippingDocument?.isCompleted"
            [supplier]="remissionProcess?.filter?.target?.name"
            [numberOfItems]="shippingDocument?.products?.length"
            [packageNumber]="shippingDocument?.packageNumber"
            alignRight="true"
            [date]="remissionProcess?.startDate"
          ></app-remissions-overview-card-content>
        </div>
      </div>

      <div
        class="container product-container"
        [ngClass]="{ last: last }"
        *ngFor="let product of shippingDocument?.products; let last = last"
      >
        <div class="card-wrapper products">
          <app-remission-details-product
            removePaddingLeftRight="true"
            [product]="product"
          ></app-remission-details-product>
        </div>
      </div>

      <app-remission-details-primary-cta
        [shippingDocument]="shippingDocument"
        [continueWithScan]="shouldScanToContinue(shippingDocument)"
        (action)="openRemission(remissionProcess)"
      ></app-remission-details-primary-cta>
    </ng-container>
  </div>

  <app-remission-printer-selection
    #printModal
    (print)="print($event)"
  ></app-remission-printer-selection>

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

  <lib-remission-shipping-document-scanner
    #scanner
    *ngIf="isIPad && showScanner"
    (scan)="shippingDocumentScanned($event)"
  ></lib-remission-shipping-document-scanner>
</ng-container>

<ng-template #loading>
  <div class="spinner"></div>
</ng-template>
