<div class="card-container" *ngIf="product">
  <div class="icon">
    <img [src]="product.imageId | bookImageUrl | async" alt="book" class="thumbnail" />
  </div>
  <div class="details">
    <div class="title-format">
      <div class="title">
        <ng-container *ngIf="product.contributors; else productNameWithoutContributors">
          <span>{{ product.contributors + ' - ' + product.name }}</span>
        </ng-container>
        <ng-template #productNameWithoutContributors>
          <span>{{ product.name }}</span>
        </ng-template>
      </div>
      <div class="format title-format--right">
        <span>{{ product.productGroupName }}</span>
      </div>
    </div>
    <div class="details-info-actions">
      <div class="details-info">
        <div class="labels">
          <div class="label">Remi-Menge</div>
          <div class="label">Platz</div>
        </div>
        <div class="datas">
          <div class="data">{{ product.remissionQuantity }}x</div>
          <div class="data">{{ product.placementType }}</div>
        </div>
      </div>
      <div class="actions">
        <span (click)="showDialog()">Entfernen</span>
      </div>
    </div>
  </div>

  <app-remission-remove-product-from-shipping-document-dialog
    *ngIf="showRemoveProductDialog"
    (remove)="remove()"
    (closed)="closedDialog()"
    #removeProductDialog
  ></app-remission-remove-product-from-shipping-document-dialog>
</div>
