@if (store.item$ | async; as item) {
  <button
    class="h-[3.75rem] shadow-[0_-2px_24px_0_#dce2e9] flex flex-row justify-center items-center w-full text-xl bg-white text-[#0556B4] font-bold border-none outline-none rounded-t"
    (click)="close.emit()"
    >
    {{ item?.product?.name }}
  </button>
  <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 mb-2">
      <ui-icon icon="recommendation" size="20px"></ui-icon>
      Artikel
    </span>
    @if (store.recommendations$ | async; as recommendations) {
      @if (recommendations.length === 0) {
        <span class="empty-message">Keine Empfehlungen verfügbar</span>
      }
      @if (recommendations.length > 0) {
        <ui-slider [scrollDistance]="210">
          @for (recommendation of store.recommendations$ | async; track recommendation) {
            <a
              class="article"
              [routerLink]="getDetailsPath(recommendation.product.ean)"
              [queryParams]="{ main_qs: recommendation.product.ean, filter_format: '' }"
              (click)="close.emit()"
              >
              <img [src]="recommendation.product?.ean | productImage: 195 : 315 : true" alt="product-image" />
              <div class="flex flex-col">
                <span class="format">{{ recommendation.product?.formatDetail }}</span>
                <span class="price">{{ recommendation.catalogAvailability?.price?.value?.value | currency: ' ' }} EUR</span>
              </div>
            </a>
          }
        </ui-slider>
      }
    }
  </div>
}
