<ng-container *ngIf="item$ | async; let orderItem">
  <div class="header">
    <strong class="instruction" *ngIf="instruction$ | async; let instruction">
      {{ instruction }}
    </strong>

    <div class="info">
      <h3 class="customer">
        <div class="name">
          <span *ngIf="orderItem.organisation != null">{{ orderItem.organisation }}</span>
          <span *ngIf="orderItem.organisation != null && orderItem.firstName != null && orderItem.lastName != null"> - </span>
          <span *ngIf="orderItem.firstName != null && orderItem.lastName != null">{{ orderItem.lastName }} {{ orderItem.firstName }}</span>
        </div>
        <div class="buyer-number">{{ orderItem?.buyerNumber }}</div>
      </h3>

      <h3 class="ssc" *ngIf="!(editSsc$ | async) && orderItem.ssc && orderItem.sscText">{{ orderItem.ssc }} - {{ orderItem.sscText }}</h3>

      <ng-container *ngIf="editSsc$ | async">
        <div *ngIf="!(supplierIdError$ | async)" class="ssc-wrapper">
          <label>Meldenummer</label>
          <input
            class="ssc-input"
            [class.err-border]="sscInvalid$ | async"
            type="text"
            [ngModel]="ssc"
            (ngModelChange)="sscChange($event)"
          />

          <span class="ssc-text" [class.err]="sscInvalid$ | async">{{ sscText$ | async }}</span>
        </div>

        <div class="err" *ngIf="supplierIdError$ | async">
          Kein Lieferant vorhanden
        </div>
      </ng-container>
    </div>
  </div>

  <div class="grid-container">
    <div class="cover">
      <img
        class="thumbnail"
        loading="lazy"
        *ngIf="orderItem?.product?.ean | productImage; let productImage"
        [src]="productImage"
        [alt]="orderItem?.product?.title"
      />
    </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">
      <div *ngIf="orderItem.product?.format && orderItem.product.formatDetail" 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">
          <ui-icon size="12px" *ngIf="orderItem.processingStatus | processingStatus: 'icon'; let icon" [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">
      Nachbestellen
    </button>
  </div>
</ng-container>
