<div>
  <hr />
  <div class="customer-order-item-row" [ngClass]="{ 'extra-padding': isPayed || isPreorder }" *ngIf="item">
    <div class="align-right tags" *ngIf="isPayed || isPreorder">
      <app-shelf-order-tag *ngIf="isPayed" type="payment"></app-shelf-order-tag>
      <app-shelf-order-tag *ngIf="isPreorder" type="preorder"></app-shelf-order-tag>
    </div>
    <div class="customer-order-item-row-container">
      <img [src]="item.isbn | bookImageUrl | async" class="item-image" alt="book image" />
      <div class="data">
        <div class="title">{{ item.name }}</div>
        <div class="labels">
          <div class="label">Status</div>
          <div class="label">Menge</div>
          <div class="label">Preis</div>
          <div class="label" *ngIf="item.estimatedDate">{{ this.estimatedDateLabel }}</div>
          <ng-container *ngIf="shrinkedData">
            <div class="label" *ngIf="!isDelivery">Abholfachnr.</div>
            <div class="label">ISBN</div>
            <div class="label" *ngIf="!isDelivery">Lieferant</div>
            <div class="label">MwSt</div>
            <div class="label">Zahlungsart</div>
            <div class="label" *ngIf="order.paymentReferenceNumber">Zahlungsreferenz</div>
            <div class="label" *ngIf="order.invoiceText">Rechnungstext</div>
            <ng-container *ngIf="isPayed && paymentData">
              <div class="label">Belegnummer</div>
              <div class="label">Belegart</div>
              <div class="label">Erstellt am</div>
              <div class="label">Zahlungsweg</div>
            </ng-container>
            <div class="label" *ngIf="isDelivery">Rechnungsadresse</div>
            <div class="label" *ngIf="isDelivery">Lieferadresse</div>
          </ng-container>
        </div>
        <div class="texts">
          <div class="text">{{ item.status }}</div>
          <div class="text">{{ item.quantity }}x</div>
          <div class="text">{{ item.price | bookPrice }} {{ item.currency }}</div>
          <div class="text" *ngIf="item.estimatedDate">{{ item.estimatedDate | date: 'dd.MM.yy' }}</div>
          <ng-container *ngIf="shrinkedData">
            <div class="text" *ngIf="!isDelivery">{{ item.ticketNumber }}</div>
            <div class="text">{{ item.isbn }}</div>
            <div class="text" *ngIf="!isDelivery">{{ item.suplier }}</div>
            <div class="text">{{ item.vat }}%</div>
            <div class="text">{{ paymentType || '-' }}</div>
            <div class="text" *ngIf="order.paymentReferenceNumber">{{ order.paymentReferenceNumber }}</div>
            <div class="text" *ngIf="order.invoiceText">{{ order.invoiceText }}</div>
            <ng-container *ngIf="isPayed && paymentData">
              <div class="text">{{ paymentData.receiptNumber || '&nbsp;' }}</div>
              <div class="text">{{ paymentData.receiptType || '&nbsp;' }}</div>
              <div class="text">{{ paymentData.printedDate || '&nbsp;' }}</div>
              <div class="text">{{ paymentData.placeOfPayment || '&nbsp;' }}</div>
            </ng-container>
            <div class="text" *ngIf="isDelivery">{{ item.billingAddress }}</div>
            <div class="text" *ngIf="isDelivery">{{ item.shippingAddress }}</div>
          </ng-container>
        </div>
        <div class="labels" *ngIf="shrinkedData">
          <div class="label">Meldenummer</div>
        </div>
        <div class="texts" *ngIf="shrinkedData">
          <div class="text">{{ item.ssc }}</div>
        </div>
        <div class="labels" *ngIf="shrinkedData">
          <div class="label">Anmerkung</div>
        </div>
        <div class="texts" *ngIf="shrinkedData">
          <div class="text">{{ item.note }}</div>
        </div>
        <ng-container *ngIf="!isOnlyOne">
          <ng-container *ngTemplateOutlet="hideDetails"></ng-container>
        </ng-container>
      </div>

      <div class="actions" [ngClass]="{ 'actions-with-tags': isPayed || isPreorder }">
        <app-button [disabled]="disableEdit" (action)="editOrder(item.id)" class="actions--edit">Bearbeiten</app-button>
        <ng-container *ngIf="!isOnlyOne">
          <ng-container *ngTemplateOutlet="moreDetails"></ng-container>
        </ng-container>
      </div>
    </div>
  </div>
  <hr *ngIf="isLast" />
  <div class="customer-order-item-row__actions" *ngIf="isOnlyOne">
    <div [class.customer-order-item-row__actions--right]="!shrinkedData">
      <ng-container *ngTemplateOutlet="moreDetails"></ng-container>
      <ng-container *ngTemplateOutlet="hideDetails"></ng-container>
    </div>
  </div>
  <ng-template #moreDetails>
    <div *ngIf="!shrinkedData" class="actions__more-btn" (click)="expand()">
      Mehr Bestelldetails <lib-icon name="Arrow_Next-with-body" alt="more"></lib-icon>
    </div>
  </ng-template>
  <ng-template #hideDetails>
    <div *ngIf="shrinkedData" class="actions__less-btn" (click)="expand()">
      <lib-icon name="Arrow_back" alt="more" pr="5px"></lib-icon>Weniger Bestelldetails
    </div>
  </ng-template>
</div>
