@if (orderItem$ | async; as orderItem) {
  <div #features class="goods-in-out-order-details-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="goods-in-out-order-details-item">
    <div class="goods-in-out-order-details-item-thumbnail">
      <img [src]="orderItem.product?.ean | productImage" [alt]="orderItem.product?.name" />
    </div>
    <div class="goods-in-out-order-details-item-details">
      <h3 [uiElementDistance]="features" #elementDistance="uiElementDistance" [style.max-width.px]="elementDistance.distanceChange | async">
        {{ [orderItem.product?.contributors, orderItem.product?.name] | title }}
      </h3>
      <strong>Bestellung</strong>
      <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>
      <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>
      <div class="detail">
        <div class="label">Preis</div>
        <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
      </div>
      <div class="detail">
        <div class="label">ISBN/EAN</div>
        <div class="value">{{ orderItem.product?.ean }}</div>
      </div>
      <div class="detail">
        <div class="label">Meldenummer</div>
        <div class="value">{{ orderItem.ssc }} - {{ orderItem.sscText }}</div>
        <ng-container *ifRole="'Store'">
          @if ((showMore$ | async) === false) {
            <button class="cta-more" (click)="setMore(true)">
              Mehr
              <ui-icon size="15px" icon="arrow"></ui-icon>
            </button>
          }
        </ng-container>
      </div>
      @if (showMore$ | async) {
        <div class="detail">
          <div class="label">Zielfiliale</div>
          <div class="value">{{ orderItem.targetBranch }}</div>
        </div>
        <div class="detail">
          <div class="label">Lieferant</div>
          <div class="value">{{ orderItem.supplier }}</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) {
            <ng-container *ifRole="'CallCenter'">
              <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>
            </ng-container>
            <ng-container *ifRole="'Store'">
              <div class="value">
                @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>
            </ng-container>
          }
        </div>
        <div class="detail">
          <div class="label">Vormerker</div>
          <div class="value">{{ orderItem.isPrebooked ? 'Ja' : 'Nein' }}</div>
        </div>
        <div class="detail">
          <div class="label">MwSt</div>
          <div class="value">{{ orderItem.retailPrice?.vat?.inPercent }}%</div>
        </div>
        <div class="detail">
          <div class="label">Zahlungsweg</div>
          <div class="value">{{ orderItem.paymentProcessing || '-' }}</div>
        </div>
        <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) {
          <div class="detail">
            <div class="label">Belegnummer</div>
            <div class="value">{{ receipt?.receiptNumber }}</div>
          </div>
          <div class="detail">
            <div class="label">Erstellt am</div>
            <div class="value">{{ receipt?.printedDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
          </div>
          <div class="detail">
            <div class="label">Rechnungstext</div>
            <div class="value">{{ receipt?.receiptText || '-' }}</div>
          </div>
          <div class="detail">
            <div class="label">Belegart</div>
            <div class="value">
              {{ receipt?.receiptType === 1 ? 'Lieferschein' : receipt?.receiptType === 64 ? 'Zahlungsbeleg' : '-' }}
            </div>
          </div>
        }
        <ng-container *ifRole="'Store'">
          @if (showMore$ | async) {
            <button class="cta-more" (click)="setMore(false)">
              <ui-icon class="less" size="15px" icon="arrow"></ui-icon>
              Weniger
            </button>
          }
        </ng-container>
      }
      <div class="history-wrapper">
        <button [disabled]="fetchHistory$ | async" class="cta-history" (click)="openHistory()">
          <ui-spinner [show]="fetchHistory$ | async">Historie</ui-spinner>
        </button>
      </div>
      @if (selectable$ | async) {
        <ui-select-bullet [ngModel]="selected$ | async" (ngModelChange)="setSelected($event)"></ui-select-bullet>
      }
    </div>
  </div>
  <div class="goods-in-out-order-details-item-comment">
    <label for="comment">Anmerkung</label>
    <textarea
      matInput
      cdkTextareaAutosize
      #autosize="cdkTextareaAutosize"
      cdkAutosizeMinRows="1"
      cdkAutosizeMaxRows="5"
      #specialCommentInput
      (keydown.delete)="triggerResize()"
      (keydown.backspace)="triggerResize()"
      type="text"
      name="comment"
      [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()"
          >
          <ui-icon icon="close" size="12px"></ui-icon>
        </button>
      }
      @if (specialCommentControl?.enabled && specialCommentControl.dirty) {
        <button
          class="cta-save"
          type="submit"
          (click)="saveSpecialComment()"
          >
          Speichern
        </button>
      }
    </div>
  </div>
}
