<div *ngFor="let subsetItem of subsetItems; index as i">
  <div class="tags">
    <img
      *ngIf="subsetItem.isPrebooked"
      [uiOverlayTrigger]="prebookedTooltip"
      class="tag preorder"
      src="/assets/images/tag_icon_preorder.svg"
      alt="Vorbesteller"
    />
    <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #prebookedTooltip [closeable]="true">
      Artikel wird für Sie vorgemerkt.
    </ui-tooltip>
  </div>

  <div class="row">
    <div class="picture">
      <img src="{{ imageUrl | async }}" alt="book" class="thumbnail" />
    </div>

    <div class="details">
      <div class="row title">
        <span class="name">
          {{ orderItem.product.contributors }}
          <span *ngIf="orderItem.product.contributors && orderItem.product.name">-</span>
          {{ orderItem.product.name }}</span
        >
      </div>

      <div class="row">
        <span class="label">Status</span>
        <span>{{ subsetItem.processingStatus | orderStatus }} </span>
      </div>

      <div class="row">
        <span class="label">Menge</span>
        <span>{{ subsetItem.quantity }}x</span>
      </div>

      <div class="row">
        <span class="label">Preis</span>
        <span>{{ orderItem.grossPrice?.value?.value | currency: ' ' }} {{ orderItem.grossPrice?.value?.currency }}</span>
      </div>

      <div class="row" *ngIf="subsetItem.estimatedShippingDate">
        <ng-container
          *ngIf="
            orderItem.features.orderType === 'Versand' ||
            orderItem.features.orderType === 'B2B-Versand' ||
            orderItem.features.orderType === 'DIG-Versand'
          "
        >
          <span class="label">Lieferung ab</span><span>{{ subsetItem.estimatedShippingDate | date: 'dd.MM.yyyy' }}</span>
        </ng-container>
        <ng-container *ngIf="orderItem.features.orderType === 'Abholung' || orderItem.features.orderType === 'Rücklage'">
          <span class="label">Abholung ab</span>
          <span>{{ subsetItem.estimatedShippingDate | date: 'dd.MM.yyyy' }}</span>
        </ng-container>
      </div>

      <span *ngIf="!expand[i]" class="expand">
        <button class="arrow-button" (click)="expand[i] = true">
          <span class="relative top-px-3">Mehr</span>
          <ui-icon icon="arrow" size="16px"></ui-icon>
        </button>
      </span>

      <ng-container *ngIf="expand[i]">
        <div class="row">
          <span class="label">Abholfachnummer</span>
          <span>{{ subsetItem.compartmentCode || '-' }} </span>
        </div>

        <div class="row">
          <span class="label">ISBN</span>
          <span>{{ orderItem.product.ean }}</span>
        </div>

        <div *ngIf="orderItem?.product?.formatDetail" class="row item-format">
          <span class="label">Format</span>
          <img
            *ngIf="orderItem?.product?.format !== '--'"
            loading="lazy"
            src="assets/images/Icon_{{ orderItem?.product?.format }}.svg"
            [alt]="orderItem?.product?.formatDetail"
          />
          <span>{{ orderItem?.product?.formatDetail }}</span>
        </div>

        <div class="row">
          <span class="label">Lieferant</span>
          <span>{{ subsetItem.supplier?.data?.name || '-' }} </span>
        </div>

        <div class="row">
          <span class="label">MwSt</span>
          <span>{{ orderItem.grossPrice?.vat?.inPercent }}%</span>
        </div>

        <div class="row">
          <span class="label">Zahlungsart</span>
          <span>{{ order.paymentType | paymentType }}</span>
        </div>

        <ng-container
          *ngIf="
            orderItem.features.orderType === 'Versand' ||
            orderItem.features.orderType === 'B2B-Versand' ||
            orderItem.features.orderType === 'DIG-Versand'
          "
        >
          <div class="row">
            <span class="label">Rechnungsadresse</span>
            <span>{{ order?.billing?.data | address }}</span>
          </div>

          <div class="row">
            <span class="label">Lieferadresse</span>
            <span>{{ order.shipping?.data | address }}</span>
          </div>
        </ng-container>

        <div class="row" *ngIf="ssc(subsetItem)">
          <span class="label">Meldenummer</span>
          <span>{{ ssc(subsetItem) }}</span>
        </div>

        <div class="row">
          <span class="label">Anmerkung</span>
          <span>{{ subsetItem.specialComment || '-' }}</span>
        </div>

        <span class="collapse">
          <button class="arrow-button" (click)="expand[i] = false">
            <ui-icon icon="arrow" size="16px" rotate="180deg"></ui-icon>
            <span class="relative top-px-3">Weniger</span>
          </button>
        </span>
      </ng-container>

      <div class="history-wrapper">
        <button class="cta-history" (click)="openHistory(subsetItem.id)">Historie</button>
      </div>
    </div>
  </div>
</div>
