<div
  class="card-container"
  [ngClass]="{ recommanded: product.recommandation }"
  (click)="productDetails(product, cardContainer, $event)"
  #cardContainer
>
  <div class="icon-container">
    <img class="product-icon" [src]="product.imageId | bookThumbnail | async" />
  </div>
  <div class="content-container">
    <div class="author align-left">
      <ng-container *ngFor="let author of product.author | getAuthorsPipe; let i = index; let last = last">
        <span [id]="'author' + i" (click)="filterByAuthor(author)">{{ author }}</span>
        <span *ngIf="!last">{{ '; ' }}</span>
      </ng-container>
    </div>
    <div class="title-price">
      <div class="title align-left" [ngClass]="{ 'title-grid': product.recommandation }">
        <div class="rec-icon-container" *ngIf="product.recommandation">
          <lib-icon name="Empfehlungen_Icon"></lib-icon>
        </div>
        <div>
          <span #titleLine>{{ product.title }}</span>
        </div>
      </div>
      <div class="price align-right">
        <span *ngIf="price > 0">{{ price | bookPrice }}</span>
        <span *ngIf="price === 0">k.A.</span>
        <span class="currency" *ngIf="price > 0">{{ product.currency }}</span>
      </div>
    </div>
    <div class="type-stock">
      <div class="type align-left">
        <div class="type-icon-container align-left">
          <lib-icon *ngIf="!!product.typeIcon && product.typeIcon != '--'" name="Icon_{{ product.typeIcon }}"></lib-icon>
        </div>
        <div class="type-text align-left">
          <span>{{ product.type }}</span>
        </div>
      </div>
      <div class="stock-container align-right">
        <div class="available-stock" [ngClass]="{ 'no-quantity-container': product.itemsInStock === 0 }">
          <div class="stock-icon-wraper" *ngIf="product.itemsInStock && product.itemsInStock > 0">
            <lib-icon
              class="stock-icon"
              name="{{ product.recommandation ? 'Icon_House_recommended' : 'Icon_House' }}"
              height="19px"
              width="16px"
            ></lib-icon>
          </div>
          <div class="stock" *ngIf="product.itemsInStock && product.itemsInStock > 0">
            <span *ngIf="product.itemsInStock">{{ product.itemsInStock }}x</span>
            <span *ngIf="!product.itemsInStock">0x</span>
          </div>
        </div>
        <div class="store-availability">
          <div class="availability-image">
            <lib-icon
              name="download_product"
              mr="3px"
              mt="1px"
              height="17px"
              *ngIf="product.typeIcon === 'EB' || product.typeIcon === 'DL'"
            ></lib-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="publisher-order">
      <div class="publisher-serial">
        <div class="publisher align-left wrap-text-more">
          <span>{{ product.publisher }}</span>
        </div>
        <div class="align-left">
          <span>|</span>
        </div>
        <div class="serial align-left">
          <span>{{ product.ean }}</span>
        </div>
        <div class="volume-edition">
          <span
            >{{ product.edition }}<span *ngIf="product.edition && product.volume">|</span>{{ product.volume ? product.volume : '' }}
            <span *ngIf="(product.edition || product.volume) && product.publicationDate">|</span>
            {{ publicationDate }}</span
          >
          <span class="order">{{ product.category }}</span>
        </div>
      </div>
      <div class="avalability-text">
        <div *ngIf="product.typeIcon !== 'EB' && product.typeIcon !== 'DL'">
          <span *ngIf="product.ssc">{{ product.ssc }}</span
          ><span *ngIf="product.ssc && product.sscText"> - </span>
          <span *ngIf="product.sscText">{{ product.storeStatusCode === 999 ? 'Lieferbar' : product.sscText }}</span>
        </div>
        <span *ngIf="product.typeIcon === 'EB' || product.typeIcon === 'DL'">Download</span>
      </div>
    </div>
  </div>
</div>
