<div class="shared-goods-in-out-order-details-wrapper">
  <ng-content select="shared-goods-in-out-order-details-header"></ng-content>
  <ng-content select="shared-goods-in-out-order-details-item"></ng-content>
  <ng-container *ngIf="showTagsComponent$ | async">
    <ng-content select="shared-goods-in-out-order-details-tags"></ng-content>
  </ng-container>
  <ng-content select="shared-goods-in-out-order-details-covers"></ng-content>
</div>

<div class="spacer"></div>

<div class="goods-in-out-order-details-action-wrapper">
  <button
    [disabled]="changeActionDisabled$ | async"
    *ngIf="addToPreviousCompartmentAction$ | async; let action"
    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>

  <button
    [disabled]="changeActionDisabled$ | async"
    class="cta-action shadow-action"
    [class.cta-action-primary]="action.selected"
    [class.cta-action-secondary]="!action.selected"
    *ngFor="let action of mainActions$ | async"
    (click)="handleAction(action)"
  >
    <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
  </button>
</div>
