<div class="align-right tags" *ngIf="isSubscription || isGift || isPayment || isPreorder">
  <app-shelf-order-tag *ngIf="isSubscription" type="subscribe"></app-shelf-order-tag>
  <app-shelf-order-tag *ngIf="isGift" type="gift"></app-shelf-order-tag>
  <app-shelf-order-tag *ngIf="isPayment" type="payment"></app-shelf-order-tag>
  <app-shelf-order-tag *ngIf="isPreorder" type="preorder"></app-shelf-order-tag>
</div>
<div class="item">
  <img [src]="_article.coverUrl | bookImageUrl | async" alt="book" class="thumbnail" />
  <div class="overview">
    <span class="title">{{ _article.title }}</span>
    <div class="labels">
      <span class="label">Menge</span>
      <span class="label">Preis</span>
      <span class="label">ISBN/EAN</span>
      <ng-container *ngIf="expand">
        <span class="label">Lieferant</span>
        <span class="label">Bestellkanal</span>
        <span class="label">Zielfiliale</span>
        <span class="label">MwSt</span>
        <ng-container *ngIf="isPayed">
          <span class="label">Zahlungsart</span>
          <span class="label">Zahlungsreferenz</span>
          <span class="label">Rechnungstext</span>
          <span class="label">Belegnummer</span>
          <span class="label">Belegart</span>
          <span class="label">Erstellt am</span>
          <span class="label">Zahlungsweg</span>
        </ng-container>
      </ng-container>
    </div>
    <div class="data">
      <span class="text">{{ _article.quantity }}</span>
      <span class="text">{{ _article.price | bookPrice }} {{ _article.currency || '&nbsp;' }}</span>
      <span class="text">{{ _article.isbn || '&nbsp;' }}</span>
      <ng-container *ngIf="expand">
        <span class="text">{{ _article.supplier || '&nbsp;' }}</span>
        <span class="text">{{ _article.orderChanel || '&nbsp;' }}</span>
        <span class="text">{{ _article.targetBranch || '&nbsp;' }}</span>
        <span class="text">{{ _article.mwst || '&nbsp;' }}</span>
        <ng-container *ngIf="isPayed">
          <span class="text">{{ paymentType || '-' }}</span>
          <span class="text">{{ paymentReferenceNumber || '-' }}</span>
          <span class="text">{{ _article.invoiceText || '&nbsp;' }}</span>
          <span class="text">{{ _article.receiptNumber || '&nbsp;' }}</span>
          <span class="text">{{ _article.receiptType || '&nbsp;' }}</span>
          <span class="text">{{ _article.printedDate || '&nbsp;' }}</span>
          <span class="text">{{ _article.placeOfPayment || '&nbsp;' }}</span>
        </ng-container>
      </ng-container>
    </div>
    <div class="labels" *ngIf="expand">
      <span class="label">Meldenummer</span>
    </div>
    <div class="data" *ngIf="expand">
      <span class="text">{{ _article.messageNumber || '&nbsp;' }}</span>
    </div>
    <div class="labels" *ngIf="expand">
      <span class="label" *ngIf="_article.remark">Anmerkung</span>
    </div>
    <div class="data" *ngIf="expand">
      <span class="text" *ngIf="_article.remark">{{ _article.remark || '&nbsp;' }}</span>
    </div>
  </div>
</div>
