<div class="page" *ngIf="pageStatus !== undefined">
  <div class="container">
    <div class="elements-wrapper">
      <div class="success-icon align-center" *ngIf="pageStatus !== 0">
        <lib-icon name="Check_green" width="32px" height="32px"></lib-icon>
      </div>
      <div class="title align-center" [ngClass]="{ 'top-space': pageStatus === 0 }">
        {{ title[pageStatus] }}
      </div>
      <div class="sub-title">
        <span class="align-center">
          {{ subTitle[pageStatus] }}
        </span>
      </div>
      <div class="image" *ngIf="pageStatus === 0">
        <ng-container *ngIf="(isSafari || isNative) && emptyOrInvalidBarcode; else desktop">
          <app-barcode-scanner *ngIf="isSafari" (scan)="handleScanResult($event)"></app-barcode-scanner>
          <lib-remission-container-scanner *ngIf="isNative" #scanner (scan)="handleScanResult($event)"></lib-remission-container-scanner>
        </ng-container>
        <ng-template #desktop>
          <div class="error-msg">
            <span>Wechseln sie auf ein mobiles Endgerät.</span>
          </div>
        </ng-template>
      </div>

      <div class="spinner" *ngIf="isPrinting"></div>
    </div>
  </div>
  <div class="actions">
    <app-button [primary]="true" *ngIf="pageStatus === 1" (action)="continueRemission()">Remission fortsetzen</app-button>
    <app-button *ngIf="pageStatus === 1" (action)="finishRemission()">Remission abschließen und beenden</app-button>
  </div>
  <app-remission-scan-shipping-document-closed #invalidDocumentDialog></app-remission-scan-shipping-document-closed>
  <app-remission-scan-product-invalid-barcode #invalidBarcodeDialog></app-remission-scan-product-invalid-barcode>
  <app-remission-printer-selection #printModal (print)="print($event)"></app-remission-printer-selection>
  <app-remission-scan-confirmation-dialog
    #confirmScanModal
    (retry)="retryScan()"
    (confirm)="completeScan($event)"
    (close)="abandonScan()"
  ></app-remission-scan-confirmation-dialog>
</div>
