@for (group of groupedItems(); track trackByGroupedItems(group)) {
  <!-- Delivery type section -->
  <section
    class="flex flex-col gap-2 self-stretch"
    data-what="delivery-type-group"
    [attr.data-which]="group.orderType"
    [attr.aria-label]="group.orderType + ' items'"
  >
    <h3
      class="flex p-2 items-center gap-[0.625rem] self-stretch rounded-2xl bg-isa-neutral-200 w-full isa-text-body-2-bold"
      role="heading"
      aria-level="3"
    >
      <ng-icon
        [name]="group.orderTypeIcon"
        size="1.5rem"
        aria-hidden="true"
      />
      @if (group.orderType === 'Abholung' || group.orderType === 'Rücklage') {
        @let branchName = group?.targetBranch?.name;
        <span>{{ group.orderType }} - {{ branchName }}</span>
      } @else {
        <span>{{ group.orderType }}</span>
      }
    </h3>

    <!-- Items from all orders in this (orderType + branch) group -->
    @for (item of group.items; track item.id; let isLast = $last) {
      <checkout-order-confirmation-item-list-item
        [item]="item"
        [order]="group"
      />
      @if (!isLast) {
        <hr class="mt-3" />
      }
    }
  </section>
}
