<ng-container *ngIf="orderItem$ | async; let orderItem">
  <div #features class="goods-in-out-order-details-features">
    <ng-container *ngIf="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>
    </ng-container>
    <ng-container *ngIf="notificationsSent$ | async; let notificationsSent">
      <ng-container *ngIf="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 />
          <ng-container *ngFor="let notification of notificationsSent?.NOTIFICATION_EMAIL">
            {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr<br />
          </ng-container>
        </ui-tooltip>
      </ng-container>
      <ng-container *ngIf="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 />
          <ng-container *ngFor="let notification of notificationsSent?.NOTIFICATION_SMS">
            {{ notification | date: 'dd.MM.yyyy | HH:mm' }} Uhr<br />
          </ng-container>
        </ui-tooltip>
      </ng-container>
    </ng-container>
  </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?.title" />
    </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">
          <img
            *ngIf="orderItem?.product?.format && orderItem?.product?.format !== 'UNKNOWN'"
            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">
          <ng-container *ngIf="!(canChangeQuantity$ | async)"> {{ orderItem?.quantity }}x </ng-container>
          <ui-quantity-dropdown
            *ngIf="canChangeQuantity$ | async"
            [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>
        <button class="cta-more" *ngIf="(more$ | async) === false" (click)="setMore(true)">
          Mehr <ui-icon size="15px" icon="arrow"></ui-icon>
        </button>
      </div>
      <ng-container *ngIf="more$ | 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">
            <ng-container
              *ngIf="
                orderItemFeature(orderItem) === 'Versand' ||
                orderItemFeature(orderItem) === 'B2B-Versand' ||
                orderItemFeature(orderItem) === 'DIG-Versand'
              "
              >Lieferung ab</ng-container
            >
            <ng-container *ngIf="orderItemFeature(orderItem) === 'Abholung' || orderItemFeature(orderItem) === 'Rücklage'">
              Abholung ab
            </ng-container>
          </div>
          <div class="value">
            {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
          </div>
        </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>

        <h4 class="receipt-header" *ngIf="receiptCount$ | async; let count">
          {{ count > 1 ? 'Belege' : 'Beleg' }}
        </h4>
        <ng-container *ngFor="let receipt of receipts$ | async">
          <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>

        <button class="cta-more" *ngIf="more$ | async" (click)="setMore(false)">
          <ui-icon class="less" size="15px" icon="arrow"></ui-icon> Weniger
        </button>
      </ng-container>
      <div class="history-wrapper">
        <button class="cta-history" (click)="openHistory()">Historie</button>
      </div>

      <ui-select-bullet *ngIf="selectable$ | async" [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">
      <button
        type="reset"
        class="clear"
        *ngIf="!!specialCommentControl.value?.length"
        (click)="specialCommentControl.setValue(''); saveSpecialComment(); triggerResize()"
      >
        <ui-icon icon="close" size="12px"></ui-icon>
      </button>
      <button
        class="cta-save"
        type="submit"
        *ngIf="specialCommentControl?.enabled && specialCommentControl.dirty"
        (click)="saveSpecialComment()"
      >
        Speichern
      </button>
    </div>
  </div>
</ng-container>
