<ng-container *ngIf="store.item$ | async; let item">
  <h1>Empfehlungen für Sie</h1>
  <p>Neben dem Titel "{{ item.product?.name }}" gibt es noch andere Artikel, die Sie interessieren könnten.</p>

  <div class="articles">
    <span class="label">
      <ui-icon icon="recommendation" size="20px"></ui-icon>
      Artikel
    </span>

    <ng-container *ngIf="store.recommendations$ | async; let recommendations">
      <span *ngIf="recommendations.length === 0" class="empty-message">
        Keine Empfehlungen verfügbar
      </span>

      <ui-slider *ngIf="recommendations.length > 0" [scrollDistance]="210">
        <a
          class="article"
          *ngFor="let recommendation of store.recommendations$ | async"
          [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'details', 'ean', recommendation.product.ean]"
          (click)="close.emit()"
        >
          <img [src]="recommendation.product?.ean | productImage: 195:315:true" alt="product-image" />

          <span class="format">{{ recommendation.product?.formatDetail }}</span>
          <span class="price">{{ recommendation.catalogAvailability?.price?.value?.value | currency: ' ' }} EUR</span>
        </a>
      </ui-slider>
    </ng-container>
  </div>
</ng-container>
