<div class="grid overflow-y-scroll h-full" [class.page-pickup-shelf-in-details__container]="!(viewFetching$ | async)">
  @if (noOrderItemsFound$ | async) {
    <div class="text-center text-2xl font-bold bg-white rounded px-4 py-8">
      <h4>Posten wurde nicht gefunden</h4>
    </div>
  }

  @if (viewFetching$ | async) {
    <div class="w-full flex flex-col justify-center items-center">
      <ui-spinner [show]="true"></ui-spinner>
      <div class="mt-6">Daten werden geladen ...</div>
    </div>
  } @else {
    <div class="mb-4">
      <page-pickup-shelf-details-header
        (handleAction)="handleAction({ action: $event })"
        (updateDate)="updateDate($event)"
        (editClick)="navigateToEditPage($event)"
      ></page-pickup-shelf-details-header>
      @if (selectedItem$ | async; as item) {
        <page-pickup-shelf-details-items-group
          [orderType]="selectedItemOrderType$ | async"
          [groupedItems]="[item]"
        ></page-pickup-shelf-details-items-group>
        <page-pickup-shelf-details-item
          class="mb-px-2"
          [orderItem]="item"
          [selected]="true"
          (historyClick)="navigateToHistoryPage($event)"
          [order]="order$ | async"
          (specialCommentChanged)="updateSpecialComment(item, $event)"
          (sharedOnInit)="fetchNotifications(item)"
        ></page-pickup-shelf-details-item>
      }
      @if (showTagsComponent$ | async) {
        <page-pickup-shelf-details-tags
          (selectedChange)="changeSelectedCompartmentInfo($event)"
          class="mb-px-2"
        ></page-pickup-shelf-details-tags>
      }
      @if (fetchingCoverItems$ | async) {
        <div class="bg-white grid grid-flow-col gap-5 justify-center items-center h-40">
          <shared-skeleton-loader class="h-16 w-12"></shared-skeleton-loader>
          <shared-skeleton-loader class="h-16 w-12"></shared-skeleton-loader>
          <shared-skeleton-loader class="h-16 w-12"></shared-skeleton-loader>
        </div>
      } @else {
        @if ((coverOrderItems$ | async)?.length > 0) {
          <page-pickup-shelf-details-covers
            [coverItems]="coverOrderItems$ | async"
            [selectedOrderItem]="selectedItem$ | async"
            (coverClick)="coverClick($event)"
          ></page-pickup-shelf-details-covers>
        }
      }
    </div>
    <div class="page-pickup-shelf-in-details__action-wrapper">
      @for (action of mainActions$ | async; track action) {
        <button
          [disabled]="actionsDisabled$ | async"
          class="cta-action shadow-action"
          [class.cta-action-primary]="action.selected"
          [class.cta-action-secondary]="!action.selected"
          (click)="handleAction({ action })"
          matomoClickCategory="pickup-shelf-in-details"
          matomoClickAction="click"
          [matomoClickName]="action.label"
          >
          <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
        </button>
      }
      @if (latestCompartmentInfos$ | async; as latestCompartmentInfos) {
        @if (addToPreviousCompartmentAction$ | async; as action) {
          <button
            [disabled]="addToPreviousCompartmentActionDisabled$ | async"
            class="cta-action shadow-action"
            [class.cta-action-primary]="action.selected"
            [class.cta-action-secondary]="!action.selected"
          (click)="
            handleAction({
              action,
              latestCompartmentCode: latestCompartmentInfos?.latestCompartmentCode,
              latestCompartmentInfo: latestCompartmentInfos?.latestCompartmentInfo,
            })
          "
            >
            <ui-spinner [show]="(changeActionLoader$ | async) === action.command">
              {{ latestDisplayedCompartmentInfos$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen
            </ui-spinner>
          </button>
        }
      }
    </div>
  }

</div>
