<div class="container">
  <div class="product-wrapper" [ngClass]="{ 'remove-padding-left-right': removePaddingLeftRight }">
    <div class="icon">
      <img [src]="product.imageId | bookImageUrl | async" alt="book" class="thumbnail" />
    </div>

    <div class="product-details">
      <div class="headline">
        <div class="title">
          <span class="contributor">{{ product?.contributors }}</span
          ><span class="name" *ngIf="product?.name">- {{ product?.name }}</span>
        </div>
        <div class="department truncate">{{ product?.productGroup }}: {{ product?.productGroupName }}</div>
      </div>

      <div class="content-row">
        <div class="content-field">
          <span class="descriptor">Remi-Menge</span>
          <span class="value">{{ product?.remissionQuantity }}x</span>
        </div>
      </div>

      <div class="content-row">
        <div class="content-field">
          <span class="descriptor">Platz</span>
          <span class="value">{{ product?.placementType }}</span>
        </div>
      </div>
    </div>
  </div>
</div>
