@if (orderItem$ | async; as orderItem) {
  <div #features class="page-customer-order-details-item__features">
    @if (orderItem?.features?.prebooked) {
      <img
        [uiOverlayTrigger]="prebookedTooltip"
        src="/assets/images/tag_icon_preorder.svg"
        [alt]="orderItem?.features?.prebooked"
      />
      <ui-tooltip
        yPosition="above"
        xPosition="after"
        [yOffset]="-11"
        [xOffset]="-8"
        #prebookedTooltip
        [closeable]="true"
      >
        Artikel wird für Sie vorgemerkt.
      </ui-tooltip>
    }
    @if (notificationsSent$ | async; as notificationsSent) {
      @if (notificationsSent?.NOTIFICATION_EMAIL) {
        <img
          [uiOverlayTrigger]="emailTooltip"
          src="/assets/images/email_bookmark.svg"
        />
        <ui-tooltip
          yPosition="above"
          xPosition="after"
          [yOffset]="-11"
          [xOffset]="-8"
          #emailTooltip
          [closeable]="true"
        >
          Per E-Mail benachrichtigt
          <br />
          @for (
            notification of notificationsSent?.NOTIFICATION_EMAIL;
            track notification
          ) {
            {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
            <br />
          }
        </ui-tooltip>
      }
      @if (notificationsSent?.NOTIFICATION_SMS) {
        <img
          [uiOverlayTrigger]="smsTooltip"
          src="/assets/images/sms_bookmark.svg"
        />
        <ui-tooltip
          yPosition="above"
          xPosition="after"
          [yOffset]="-11"
          [xOffset]="-8"
          #smsTooltip
          [closeable]="true"
        >
          Per SMS benachrichtigt
          <br />
          @for (
            notification of notificationsSent?.NOTIFICATION_SMS;
            track notification
          ) {
            {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr
            <br />
          }
        </ui-tooltip>
      }
    }
  </div>
  <div class="page-customer-order-details-item__item-container">
    <div class="page-customer-order-details-item__thumbnail">
      <img
        [src]="orderItem.product?.ean | productImage"
        [alt]="orderItem.product?.name"
      />
    </div>
    <div class="page-customer-order-details-item__details">
      <div class="flex flex-row justify-between items-start mb-[1.3125rem]">
        <h3
          [uiElementDistance]="features"
          #elementDistance="uiElementDistance"
          [style.max-width.px]="elementDistance.distanceChange | async"
          class="flex flex-col"
        >
          @if (hasRewardPoints$ | async) {
            <ui-label class="w-10 mb-2">Prämie</ui-label>
          }
          <div class="font-normal mb-[0.375rem]">
            {{ orderItem.product?.contributors }}
          </div>
          <div>{{ orderItem.product?.name }}</div>
        </h3>
        <div class="history-wrapper flex flex-col items-end justify-center">
          <button
            class="cta-history text-p1"
            (click)="historyClick.emit(orderItem)"
          >
            Historie
          </button>
          @if (selectable$ | async) {
            <input
              [ngModel]="selected$ | async"
              (ngModelChange)="setSelected($event)"
              class="isa-select-bullet mt-4"
              type="checkbox"
            />
          }
        </div>
      </div>
      <div class="detail">
        <div class="label">Menge</div>
        <div class="value">
          @if (!(canChangeQuantity$ | async)) {
            {{ orderItem?.quantity }}x
          }
          @if (canChangeQuantity$ | async) {
            <ui-quantity-dropdown
              [showTrash]="false"
              [range]="orderItem?.quantity"
              [(ngModel)]="quantity"
              [showSpinner]="false"
            ></ui-quantity-dropdown>
          }
          <span class="overall-quantity"
            >(von {{ orderItem?.overallQuantity }})</span
          >
        </div>
      </div>
      @if (!!orderItem.product?.formatDetail) {
        <div class="detail">
          <div class="label">Format</div>
          <div class="value">
            @if (
              orderItem?.product?.format &&
              orderItem?.product?.format !== 'UNKNOWN'
            ) {
              <img
                class="format-icon"
                [src]="
                  '/assets/images/Icon_' + orderItem.product?.format + '.svg'
                "
                alt="format icon"
              />
            }
            <span>{{ orderItem.product?.formatDetail }}</span>
          </div>
        </div>
      }
      @if (!!orderItem.product?.ean) {
        <div class="detail">
          <div class="label">ISBN/EAN</div>
          <div class="value">{{ orderItem.product?.ean }}</div>
        </div>
      }
      @if (orderItem.price !== undefined || (hasRewardPoints$ | async)) {
        <div class="detail">
          @if (hasRewardPoints$ | async) {
            <div class="label">Prämie</div>
            <div class="value">
              {{ rewardPoints$ | async | number: '1.0-0' }} Lesepunkte
            </div>
          } @else {
            <div class="label">Preis</div>
            <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
          }
        </div>
      }
      @if (!!orderItem.retailPrice?.vat?.inPercent) {
        <div class="detail">
          <div class="label">MwSt</div>
          <div class="value">{{ orderItem.retailPrice?.vat?.inPercent }}%</div>
        </div>
      }
      <hr class="border-[#EDEFF0] border-t-2 my-4" />
      @if (orderItem.supplier) {
        <div class="detail">
          <div class="label">Lieferant</div>
          <div class="value">{{ orderItem.supplier }}</div>
        </div>
      }
      @if (!!orderItem.ssc || !!orderItem.sscText) {
        <div class="detail">
          <div class="label">Meldenummer</div>
          <div class="value">{{ orderItem.ssc }} - {{ orderItem.sscText }}</div>
        </div>
      }
      @if (!!orderItem.targetBranch) {
        <div class="detail">
          <div class="label">Zielfiliale</div>
          <div class="value">{{ orderItem.targetBranch }}</div>
        </div>
      }
      <div class="detail">
        <div class="label">
          @if (
            orderItemFeature(orderItem) === 'Versand' ||
            orderItemFeature(orderItem) === 'B2B-Versand' ||
            orderItemFeature(orderItem) === 'DIG-Versand'
          ) {
            {{
              orderItem?.estimatedDelivery
                ? 'Lieferung zwischen'
                : 'Lieferung ab'
            }}
          }
          @if (
            orderItemFeature(orderItem) === 'Abholung' ||
            orderItemFeature(orderItem) === 'Rücklage'
          ) {
            Abholung ab
          }
        </div>
        @if (
          !!orderItem?.estimatedDelivery || !!orderItem?.estimatedShippingDate
        ) {
          <div class="value bg-[#D8DFE5] rounded w-max px-2">
            @if (!!orderItem?.estimatedDelivery) {
              {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und
              {{ orderItem?.estimatedDelivery?.stop | date: 'dd.MM.yy' }}
            } @else {
              @if (!!orderItem?.estimatedShippingDate) {
                {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
              }
            }
          </div>
        }
      </div>
      @if (getOrderItemTrackingData(orderItem); as trackingData) {
        <div class="page-customer-order-details-item__tracking-details">
          <div class="label">
            {{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}
          </div>
          @for (tracking of trackingData; track tracking) {
            @if (tracking.trackingProvider === 'DHL' && !isNative) {
              <a
                class="value text-[#0556B4]"
                [href]="getTrackingNumberLink(tracking.trackingNumber)"
                target="_blank"
              >
                {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}
              </a>
            } @else {
              <p class="value">
                {{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}
              </p>
            }
          }
        </div>
      }
      <hr class="border-[#EDEFF0] border-t-2 my-4" />
      @if (!!orderItem?.compartmentCode) {
        <div class="detail">
          <div class="label">Abholfachnr.</div>
          <div class="value">{{ orderItem?.compartmentCode }}</div>
        </div>
      }
      <div class="detail">
        <div class="label">Vormerker</div>
        <div class="value">{{ orderItem.isPrebooked ? 'Ja' : 'Nein' }}</div>
      </div>
      <hr class="border-[#EDEFF0] border-t-2 my-4" />
      @if (!!orderItem.paymentProcessing) {
        <div class="detail">
          <div class="label">Zahlungsweg</div>
          <div class="value">{{ orderItem.paymentProcessing || '-' }}</div>
        </div>
      }
      @if (!!orderItem.paymentType) {
        <div class="detail">
          <div class="label">Zahlungsart</div>
          <div class="value">{{ orderItem.paymentType | paymentType }}</div>
        </div>
      }
      @if (receiptCount$ | async; as count) {
        <h4 class="receipt-header">
          {{ count > 1 ? 'Belege' : 'Beleg' }}
        </h4>
      }
      @for (receipt of receipts$ | async; track receipt) {
        @if (!!receipt?.receiptNumber) {
          <div class="detail">
            <div class="label">Belegnummer</div>
            <div class="value">{{ receipt?.receiptNumber }}</div>
          </div>
        }
        @if (!!receipt?.printedDate) {
          <div class="detail">
            <div class="label">Erstellt am</div>
            <div class="value">
              {{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr
            </div>
          </div>
        }
        @if (!!receipt?.receiptText) {
          <div class="detail">
            <div class="label">Rechnungstext</div>
            <div class="value">{{ receipt?.receiptText || '-' }}</div>
          </div>
        }
        @if (!!receipt?.receiptType) {
          <div class="detail">
            <div class="label">Belegart</div>
            <div class="value">
              {{
                receipt?.receiptType === 1
                  ? 'Lieferschein'
                  : receipt?.receiptType === 64
                    ? 'Zahlungsbeleg'
                    : '-'
              }}
            </div>
          </div>
        }
      }
      <div
        class="page-customer-order-details-item__comment flex flex-col items-start mt-[1.625rem]"
      >
        <div class="label mb-[0.375rem]">Anmerkung</div>
        <div class="flex flex-row w-full">
          <textarea
            matInput
            cdkTextareaAutosize
            #autosize="cdkTextareaAutosize"
            cdkAutosizeMinRows="1"
            cdkAutosizeMaxRows="5"
            maxlength="200"
            #specialCommentInput
            (keydown.delete)="triggerResize()"
            (keydown.backspace)="triggerResize()"
            type="text"
            name="comment"
            placeholder="Eine Anmerkung hinzufügen"
            [formControl]="specialCommentControl"
            [class.inactive]="!specialCommentControl.dirty"
          ></textarea>
          <div class="comment-actions">
            @if (!!specialCommentControl.value?.length) {
              <button
                type="reset"
                class="clear"
                (click)="
                  specialCommentControl.setValue('');
                  saveSpecialComment();
                  triggerResize()
                "
              >
                <shared-icon icon="close" [size]="24"></shared-icon>
              </button>
            }
            @if (
              specialCommentControl?.enabled && specialCommentControl.dirty
            ) {
              <button
                class="cta-save"
                type="submit"
                (click)="saveSpecialComment()"
              >
                Speichern
              </button>
            }
          </div>
        </div>
      </div>
    </div>
  </div>
}
