<div class="container fixed-card-container">
  <div class="fixed-card-header reco-header">
    <span>Empfehlungen für Sie</span>
  </div>
  <div class="fixed-header-description description">
    <span *ngIf="book"> Neben dem Titel “{{ bookTitle }}” gibt es noch andere Artikel, die Sie interessieren könnten.</span>
    <span *ngIf="!book">Es gibt noch andere Artikel, Newsletter oder Events die Sie interessieren könnten.</span>
  </div>
  <div class="header">
    <img class="icon" src="/assets/images/Empfehlungen_Icon_blue.svg" />
    <span>ARTIKEL</span>
  </div>
  <div class="books-container">
    <div
      class="book-layer-fade-start"
      (mouseover)="showBackIcon()"
      (mouseleave)="hideBackIcon($event)"
      [class.visible]="showBack"
      *ngIf="showBackContainer && !isIPad"
    ></div>
    <div class="icon-arrow-start" (mouseleave)="hideBackIcon($event)" *ngIf="showBack && showBackContainer && !isIPad">
      <lib-icon width="50px" name="tab_Arrow_3" type="png" (click)="scrollBack()"></lib-icon>
    </div>

    <div class="books" #books (scroll)="scrollHandler($event)">
      <div class="book" (click)="details(item.ean, item.name)" *ngFor="let item of recommendations; let last = last">
        <div class="book-content" [ngClass]="{ 'last-book': last }">
          <img src="{{ item.imgUrl }}" alt="book image" />
          <span class="book-type">{{ item.type }}</span>
          <span class="price">{{ item.price | bookPrice }} EUR</span>
        </div>
      </div>
    </div>

    <div
      class="book-layer-fade"
      (mouseover)="showFowardIcon()"
      (mouseleave)="hideFowardIcon($event)"
      [class.visible]="showForward"
      *ngIf="showForwarContainer && !isIPad"
    ></div>
    <div class="icon-arrow" (mouseleave)="hideFowardIcon($event)" *ngIf="showForward && showForwarContainer && !isIPad">
      <lib-icon width="50px" name="tab_Arrow_2" type="png" (click)="scrollForward()"></lib-icon>
    </div>
  </div>
</div>
