<div class="other-format-label" [ngClass]="{ 'max-height': isIPad === false }">
  <span *ngIf="productFormats && productFormats.length > 0">Auch verfügbar als</span>
</div>
<div
  id="other-formats-container"
  class="other-formats-container"
  #formats
  (scroll)="scrollHandler($event)"
  (mouseover)="calculateTopPosition()"
>
  <ng-container *ngFor="let item of productFormats; let last = last">
    <div class="other-format align-left" [ngClass]="{ 'last-format': last }" (click)="productDetails(item.id, item.ean)" id="{{ item.id }}">
      <div class="type-icon">
        <lib-icon name="OF_Icon_{{ item.format }}"></lib-icon>
      </div>
      <div *ngIf="item.price > 0">{{ item.formatDetail }} {{ item.price | bookPrice }}€</div>
      <div *ngIf="item.price === 0">k.A.</div>
    </div>
    <div *ngIf="last" class="other-format last"></div>
  </ng-container>
</div>
<div
  class="back-arrow-container"
  *ngIf="showBackContainer"
  (mouseover)="showBackIcon()"
  (mouseleave)="hideBackIcon()"
  [style.top.px]="topPosition"
>
  <lib-icon class="icon" width="118px" height="50px" name="tab_Arrow" type="png" (click)="scrollBack()" *ngIf="showBack"></lib-icon>
</div>
<div
  class="foward-arrow-container"
  *ngIf="showFowardContainer"
  (mouseover)="showFowardIcon()"
  (mouseleave)="hideFowardIcon()"
  [style.top.px]="topPosition"
>
  <lib-icon class="icon" width="118px" height="50px" name="tab_Arrow" type="png" (click)="scrollFoward()" *ngIf="showNext"></lib-icon>
</div>
