<div class="mb-4">
  <page-customer-order-details-header
    (editClick)="navigateToEditPage($event)"
    (handleAction)="handleAction($event)"
    [order]="order$ | async"
  ></page-customer-order-details-header>
  @for (item of items$ | async; track item) {
    <page-customer-order-details-item
      class="mb-px-2"
      [orderItem]="item"
      [order]="order$ | async"
      [selected]="true"
      (historyClick)="navigateToHistoryPage($event)"
      (specialCommentChanged)="onSpecialCommentChange()"
    ></page-customer-order-details-item>
  }
  @if (showTagsComponent$ | async) {
    <page-customer-order-details-tags></page-customer-order-details-tags>
  }
</div>
<div class="page-customer-order-details__action-wrapper">
  @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, { compartmentCode: latestCompartmentCode, compartmentInfo: latestCompartmentInfo })"
      >
      <ui-spinner [show]="(changeActionLoader$ | async) === action.command">
        {{ latestCompartmentCode$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen
      </ui-spinner>
    </button>
  }

  @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)"
      >
      <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
    </button>
  }
</div>
