@if (item$ | async; as orderItem) {
  <div class="header">
    @if (instruction$ | async; as instruction) {
      <strong class="instruction">
        {{ instruction }}
      </strong>
    }
    <div class="info">
      <h3 class="customer">
        <div class="name">
          @if (orderItem.organisation != null) {
            <span>{{ orderItem.organisation }}</span>
          }
          @if (orderItem.organisation != null && orderItem.firstName != null && orderItem.lastName != null) {
            <span>-</span>
          }
          @if (orderItem.firstName != null && orderItem.lastName != null) {
            <span>{{ orderItem.lastName }} {{ orderItem.firstName }}</span>
          }
        </div>
        <div class="buyer-number">{{ orderItem?.buyerNumber }}</div>
      </h3>
      @if (!(editSsc$ | async) && orderItem.ssc && orderItem.sscText) {
        <h3 class="ssc">{{ orderItem.ssc }} - {{ orderItem.sscText }}</h3>
      }
      @if (editSsc$ | async) {
        @if (!(supplierIdError$ | async)) {
          <div class="ssc-wrapper">
            <label>Meldenummer</label>
            <input
              class="ssc-input"
              [class.err-border]="sscInvalid$ | async"
              type="text"
              [ngModel]="ssc"
              (ngModelChange)="sscChange($event)"
              [matomoTracker]="['blur']"
              matomoCategory="goods-in-list-item"
              matomoAction="input"
              matomoName="meldenummer"
              />
              <span class="ssc-text" [class.err]="sscInvalid$ | async">{{ sscText$ | async }}</span>
            </div>
          }
          @if (supplierIdError$ | async) {
            <div class="err">Kein Lieferant vorhanden</div>
          }
        }
      </div>
    </div>
    <div class="grid-container" [class.grid-container-tablet]="environmentService.isTablet()">
      <div class="cover">
        @if (orderItem?.product?.ean | productImage; as productImage) {
          <img
            class="thumbnail"
            loading="lazy"
            [productImageNavigation]="orderItem?.product?.ean"
            [src]="productImage"
            [alt]="orderItem?.product?.name"
            />
        }
      </div>
      <div class="title">
        <strong class="product-name">{{ [orderItem.product.contributors, orderItem.product.name] | title }}</strong>
      </div>
      <div class="comment">
        <strong>{{ orderItem.specialComment }}</strong>
      </div>
      <div class="details">
        @if (orderItem.product?.format && orderItem.product.formatDetail) {
          <div class="format">
            <img class="format-icon" [src]="'/assets/images/Icon_' + orderItem.product?.format + '.svg'" alt="format icon" />
            <strong class="format-text">{{ orderItem.product.formatDetail }}</strong>
          </div>
        }
        <div class="supplier spec">
          <span>Lieferant</span>
          <strong>{{ orderItem.supplier }}</strong>
        </div>
        <div class="ean">
          <strong>{{ orderItem.product.ean }}</strong>
        </div>
        <div class="item-id spec">
          <span>Vorgangs-ID</span>
          <strong>{{ orderItem.orderNumber }}</strong>
        </div>
        <div class="price">
          <strong>{{ orderItem.price | currency: 'EUR' : 'code' }}</strong>
        </div>
        <div class="status spec">
          <span>Status</span>
          <strong class="processing-status">
            @if (orderItem.processingStatus | processingStatus: 'icon'; as icon) {
              <ui-icon size="12px" [icon]="icon"></ui-icon>
            }
            {{ orderItem.processingStatus | processingStatus }}
          </strong>
        </div>
        <div class="quantity spec">
          <strong>{{ orderItem.quantity }}x</strong>
        </div>
        <div class="order-date spec">
          <span>Bestelldatum</span>
          <strong>{{ orderItem.orderDate | date: 'dd.MM.yy' }}</strong>
        </div>
        <div class="date spec">
          <span>vsl. Lieferdatum</span>
          <strong>{{ orderItem.estimatedShippingDate | date: 'dd.MM.yy' }}</strong>
        </div>
      </div>
    </div>
    <div class="footer">
      <button
        class="cta-reorder"
        (click)="showReorderModal(); $event.stopPropagation()"
        [disabled]="editSsc$ | async"
        matomoClickCategory="goods-in-list-item"
        matomoClickAction="click"
        matomoClickName="nachbestellen"
        >
        Nachbestellen
      </button>
    </div>
  }
