<div class="flex flex-row items-center relative bg-[#F5F7FA] p-4 rounded-t mb-[0.125rem]">
  @if (showFeature) {
    <div class="flex flex-row items-center mr-3">
      @switch (orderType) {
        @case ('Versand') {
          <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
            <shared-icon [size]="24" icon="isa-truck"></shared-icon>
          </div>
          <p class="font-bold text-p1">Versand</p>
        }
        @case ('DIG-Versand') {
          <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
            <shared-icon [size]="24" icon="isa-truck"></shared-icon>
          </div>
          <p class="font-bold text-p1">Versand</p>
        }
        @case ('B2B-Versand') {
          <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
            <shared-icon [size]="24" icon="isa-b2b-truck"></shared-icon>
          </div>
          <p class="font-bold text-p1">B2B-Versand</p>
        }
        @case ('Abholung') {
          <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
            <shared-icon [size]="24" icon="isa-box-out"></shared-icon>
          </div>
          <p class="font-bold text-p1 mr-3">Abholung</p>
          {{ targetBranches }}
        }
        @case ('Rücklage') {
          <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
            <shared-icon [size]="24" icon="isa-shopping-bag"></shared-icon>
          </div>
          <p class="font-bold text-p1">Rücklage</p>
        }
        @case ('Download') {
          <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
            <shared-icon [size]="24" icon="isa-download"></shared-icon>
          </div>
          <p class="font-bold text-p1">Download</p>
        }
      }
    </div>
  }

  @if (showAddresses) {
    <div class="page-pickup-shelf-details-items-group__additional-addresses">
      <button (click)="openAddresses = !openAddresses" class="text-[#0556B4]">
        Lieferadresse / Rechnungsadresse {{ openAddresses ? 'ausblenden' : 'anzeigen' }}
      </button>
      @if (openAddresses) {
        <div class="page-pickup-shelf-details-items-group__addresses-popover">
          <button (click)="openAddresses = !openAddresses" class="close">
            <shared-icon icon="close" [size]="24"></shared-icon>
          </button>
          <div class="page-pickup-shelf-details-items-group__addresses-popover-data">
            @if (order.shipping) {
              <div class="page-pickup-shelf-details-items-group__addresses-popover-delivery">
                <p>Lieferadresse</p>
                <div class="page-pickup-shelf-details-items-group__addresses-popover-delivery-data">
                  @if (order.shipping?.data?.organisation) {
                    <p>{{ order.shipping?.data?.organisation?.name }}</p>
                    <p>{{ order.shipping?.data?.organisation?.department }}</p>
                  }
                  <p>{{ order.shipping?.data?.firstName }} {{ order.shipping?.data?.lastName }}</p>
                  <p>{{ order.shipping?.data?.address?.info }}</p>
                  <p>{{ order.shipping?.data?.address?.street }} {{ order.shipping?.data?.address?.streetNumber }}</p>
                  <p>{{ order.shipping?.data?.address?.zipCode }} {{ order.shipping?.data?.address?.city }}</p>
                </div>
              </div>
            }
            @if (order.billing) {
              <div class="page-pickup-shelf-details-items-group__addresses-popover-billing">
                <p>Rechnungsadresse</p>
                <div class="page-pickup-shelf-details-items-group__addresses-popover-billing-data">
                  @if (order.billing?.data?.organisation) {
                    <p>{{ order.billing?.data?.organisation?.name }}</p>
                    <p>{{ order.billing?.data?.organisation?.department }}</p>
                  }
                  <p>{{ order.billing?.data?.firstName }} {{ order.billing?.data?.lastName }}</p>
                  <p>{{ order.billing?.data?.address?.info }}</p>
                  <p>{{ order.billing?.data?.address?.street }} {{ order.billing?.data?.address?.streetNumber }}</p>
                  <p>{{ order.billing?.data?.address?.zipCode }} {{ order.billing?.data?.address?.city }}</p>
                </div>
              </div>
            }
          </div>
        </div>
      }
    </div>
  }

  @if (showMultiselect$ | async) {
    <div class="page-pickup-shelf-details-items-group__select grow">
      <button class="cta-select-all" (click)="selectAll()">Alle auswählen</button>
      {{ selectedOrderItemCount$ | async }} von {{ groupedItems.length }} Titeln
    </div>
  }
</div>
