<div class="flex flex-row items-center h-14 bg-white relative rounded-t font-bold shadow-lg">
  <h3 class="text-center grow font-bold text-h3">Packstück-Prüfung</h3>
</div>
@if (packageDetails$ | async; as packageDetails) {
  <ng-container (sharedOnInit)="calculateListHeight()">
    <div class="bg-background-liste">
      <div class="bg-white text-center text-xl py-10" [innerText]="packageDetails?.package?.features?.['description'] ?? ''"></div>
      <div class="bg-white rounded-t shadow-card grid grid-flow-row p-4 gap-2">
        <div class="grid grid-cols-6">
          <div class="font-bold col-span-2 truncate">
            {{ packageDetails.package.packageNumber }}
            @if (packageDetails.package.packageNumber && packageDetails.package.deliveryNoteNumber) {
              <span>|</span>
            }
            {{ packageDetails.package.deliveryNoteNumber }}
          </div>
          <div class="col-span-3" [class.annotation-layout]="packageDetails?.package?.features?.['annotation']">
            @if (packageDetails.package.arrivalStatus !== 8) {
              Filialstopp
              <span class="font-bold ml-2">
                {{ packageDetails.package.area }}
              </span>
            } @else {
              Filiale
              <span class="font-bold ml-2">
                {{ packageDetails.package.misrouted | split: ':' | at: 1 }}
              </span>
            }
          </div>
          @if (!packageDetails?.package?.features?.['annotation']) {
            <div data-which="Statusmeldung" class="text-right">
              @if ((packageDetails.package.arrivalStatus | arrivalStatus) === 'Fehlt') {
                <button
                  class="isa-icon-button mr-2"
                  [class.text-white]="uiOverlayTrigger.opened"
                  [class.bg-active-branch]="uiOverlayTrigger.opened"
                  [class.border-active-branch]="uiOverlayTrigger.opened"
                  [uiOverlayTrigger]="infoTooltip"
                  #uiOverlayTrigger="uiOverlayTrigger"
                  >
                  i
                </button>
                <ui-tooltip
                  [warning]="true"
                  #infoTooltip
                  [xOffset]="3"
                  [yOffset]="-10"
                  [yPosition]="'above'"
                  [xPosition]="'after'"
                  [closeable]="true"
                  >
                  Zur erneuten Prüfung 7 Tage nach Avisierung.
                </ui-tooltip>
              }
              <div
                class="isa-label text-white font-bold page-package-details__arrival-status"
                [class]="packageDetails.package.arrivalStatus | arrivalStatusColorClass"
                data-what="arrival-status"
                >
                {{ packageDetails.package.arrivalStatus | arrivalStatus }}
              </div>
            </div>
          } @else {
            <div class="page-package-details__annotation text-right text-[#5A728A] col-span-2" data-what="annotation">
              {{ packageDetails?.package?.features?.['annotation'] }}
            </div>
          }
        </div>
        <div class="grid grid-cols-6">
          <div class="col-span-2">
            Avisiert am
            <span class="font-bold ml-2">
              {{ packageDetails.package.estimatedDeliveryDate | date }}
            </span>
          </div>
          <div class="col-span-3">
            @switch (packageDetails.package.arrivalStatus | arrivalStatus) {
              @case ('Eingetroffen') {
                Gescannt am
                <span class="font-bold ml-2">{{ packageDetails.package.arrivalChecked | date: 'dd.MM.YYYY | HH:mm' }} Uhr</span>
              }
            }
          </div>
          <div class="text-right">
            <span class="font-bold">{{ packageDetails?.package?.items ?? '-' }}</span>
            Exemplare
          </div>
        </div>
      </div>
    </div>
    <page-package-details-list
      [height]="detailsListHeight"
      [items]="packageDetails.items"
      [arrivalStatus]="packageDetails?.package?.arrivalStatus"
      [hasActions]="!!(displayActions$ | async)?.length"
    ></page-package-details-list>
    @if (displayActions$ | async; as displayActions) {
      <div class="action-wrapper">
        @for (action of displayActions; track action) {
          <button class="isa-button isa-cta-button" type="button" (click)="onActionClick(action)">
            {{ action.label }}
          </button>
        }
      </div>
    }
  </ng-container>
} @else {
  <div class="grid items-center justify-center h-52">
    <div class="text-active-branch inline-flex flex-col items-center">
      <ui-icon class="w-9 h-9 mb-2 animate-spin" icon="spinner" size="36px"></ui-icon>
      <div>Daten werden geladen...</div>
    </div>
  </div>
}

