<ng-container *ngIf="!showRecommendations">
  <div #detailsContainer class="product-card">
    <ng-container *ngIf="store.item$ | async; let item">
      <div class="product-details">
        <div class="product-image">
          <button class="image-button" (click)="showImages()">
            <img [src]="item.imageId | productImage: 195:315:true" alt="product image" />
            <ui-icon icon="search_add" size="22px"></ui-icon>
          </button>

          <button (click)="showReviews()" class="recessions" *ngIf="item.reviews?.length > 0">
            <ui-stars [rating]="store.reviewRating$ | async"></ui-stars>

            <div class="cta-recessions">{{ item.reviews.length }} Rezensionen</div>
          </button>
        </div>

        <div class="product-info">
          <div class="row" [class.bookmark-badge-gap]="isBadgeVisible$ | async">
            <div>
              <a
                *ngFor="let contributor of contributors$ | async; let last = last"
                class="autor"
                [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'search', 'results']"
                [queryParams]="{ main_qs: contributor, main_author: 'author' }"
              >
                {{ contributor }}{{ last ? '' : ';' }}
              </a>
            </div>

            <button class="cta-print right" (click)="print()">Drucken</button>
          </div>
          <div class="title">
            {{ item.product?.name }}
          </div>

          <div class="row">
            <div>
              <div class="format" *ngIf="item?.product?.format && item?.product?.formatDetail">
                <img
                  *ngIf="item?.product?.format !== '--'"
                  class="format-icon"
                  [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
                  [alt]="item.product?.formatDetail"
                />
                {{ item.product?.formatDetail }}
              </div>
              <div *ngIf="item?.product?.volume">Band/Reihe {{ item?.product?.volume }}</div>

              <div>{{ publicationDate$ | async }}</div>
            </div>

            <div class="right">
              <div class="price" *ngIf="item.catalogAvailability?.price?.value?.value; else retailPrice">
                {{ item.catalogAvailability?.price?.value?.value | currency: item.catalogAvailability?.price?.value?.currency:'code' }}
              </div>
              <ng-template #retailPrice>
                <div class="price" *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability">
                  {{
                    takeAwayAvailability?.retailPrice?.value?.value | currency: takeAwayAvailability?.retailPrice?.value?.currency:'code'
                  }}
                </div>
              </ng-template>
              <div *ngIf="store.promotionPoints$ | async; let promotionPoints">{{ promotionPoints }} Lesepunkte</div>
            </div>
          </div>

          <div class="row stock">
            <div data-name="product-manufacturer">{{ item.product?.manufacturer }}</div>

            <div class="right quantity">
              <div class="fetching small" *ngIf="store.fetchingTakeAwayAvailability$ | async"></div>
              <ng-container *ngIf="!(store.fetchingTakeAwayAvailability$ | async)">
                <ng-container *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability">
                  <ui-icon icon="home" size="22px"></ui-icon>
                  {{ takeAwayAvailability.inStock || 0 }}x
                </ng-container>
              </ng-container>
            </div>
          </div>
          <div *ngIf="item?.product?.locale" data-name="product-language">{{ item?.product?.locale }}</div>

          <div class="row">
            <div data-name="product-ean">{{ item.product?.ean }}</div>
            <div class="right">
              <div class="availability-icons">
                <div class="fetching medium" *ngIf="fetchingAvailabilities$ | async"></div>
                <ng-container *ngIf="!(fetchingAvailabilities$ | async)">
                  <ui-icon *ngIf="store.isTakeAwayAvailabilityAvailable$ | async" icon="shopping_bag" size="18px"></ui-icon>
                  <ui-icon *ngIf="store.isPickUpAvailabilityAvailable$ | async" icon="box_out" size="18px"></ui-icon>
                  <ui-icon class="truck" *ngIf="showDeliveryTruck$ | async" icon="truck" size="30px"></ui-icon>
                  <ui-icon class="truck_b2b" *ngIf="showDeliveryB2BTruck$ | async" icon="truck_b2b" size="40px"></ui-icon>

                  <span *ngIf="store.isDownload$ | async" class="download-icon">
                    <ui-icon icon="download" size="18px"></ui-icon>
                    <span class="label">Download</span>
                  </span>
                </ng-container>
              </div>
            </div>
          </div>

          <div class="shelfinfo right" *ngIf="store.isDownload$ | async">
            <ng-container
              *ngIf="
                item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label;
                else stockInfos
              "
            >
              <span data-name="compartment">
                {{ (item?.stockInfos)[0]?.compartment }}
              </span>
              /
              <br />
              <span data-name="shelf-info-label">
                {{ (item?.shelfInfos)[0]?.label }}
              </span>
            </ng-container>
            <ng-template #stockInfos>
              <ng-container *ngIf="item?.stockInfos && (item?.stockInfos)[0]?.compartment; else shelfInfos">
                {{ (item?.stockInfos)[0]?.compartment }}
              </ng-container>
            </ng-template>
            <ng-template #shelfInfos>
              <ng-container *ngIf="item?.shelfInfos && (item?.shelfInfos)[0]?.label">
                <span data-name="shelf-info-label">{{ (item?.shelfInfos)[0]?.label }}</span>
              </ng-container>
            </ng-template>
          </div>

          <div class="row">
            <div class="specs">
              <ng-container *ngIf="item?.specs?.length > 0">
                {{ (item?.specs)[0]?.value }}
              </ng-container>
            </div>
            <div class="right ssc">
              <div class="fetching" *ngIf="fetchingAvailabilities$ | async"></div>
              <ng-container *ngIf="!(fetchingAvailabilities$ | async)">
                <div *ngIf="store.sscText$ | async; let sscText">
                  {{ sscText }}
                </div>
              </ng-container>
            </div>
          </div>

          <div class="shelfinfo right" *ngIf="!(store.isDownload$ | async)">
            <ng-container
              *ngIf="
                item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label;
                else stockInfos2
              "
            >
              <span data-name="compartment">{{ (item?.stockInfos)[0]?.compartment }}</span>
              /
              <br />
              <span data-name="shelf-info-label">{{ (item?.shelfInfos)[0]?.label }}</span>
            </ng-container>
            <ng-template #stockInfos2>
              <ng-container *ngIf="item?.stockInfos && (item?.stockInfos)[0]?.compartment; else shelfInfos2">
                {{ (item?.stockInfos)[0]?.compartment }}
              </ng-container>
            </ng-template>
            <ng-template #shelfInfos2>
              <ng-container *ngIf="item?.shelfInfos && (item?.shelfInfos)[0]?.label">
                {{ (item?.shelfInfos)[0]?.label }}
              </ng-container>
            </ng-template>
          </div>
        </div>

        <div class="bookmark">
          <div *ngIf="showArchivBadge$ | async" class="archiv-badge">
            <button [uiOverlayTrigger]="archivTooltip" class="bookmark-badge">
              <img src="/assets/images/bookmark_benachrichtigung_archiv.svg" alt="Archiv Badge" />
              <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #archivTooltip [closeable]="true">
                <ng-container *ngIf="isAvailable$ | async; else notAvailable">
                  Archivtitel. Wird nicht mehr gedruckt. Artikel ist bestellbar, weil lieferbar.
                </ng-container>
                <ng-template #notAvailable>
                  Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar.
                </ng-template>
              </ui-tooltip>
            </button>
          </div>
          <div *ngIf="showSubscriptionBadge$ | async">
            <button [uiOverlayTrigger]="subscribtionTooltip" class="bookmark-badge">
              <img src="/assets/images/bookmark_subscription.svg" alt="Fortsetzungsartikel Badge" />
            </button>
            <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #subscribtionTooltip [closeable]="true"
              >Artikel ist ein Fortsetzungsartikel,<br />
              Artikel muss über eine Aboabteilung<br />
              bestellt werden.
            </ui-tooltip>
          </div>
          <div *ngIf="showPromotionBadge$ | async" class="promotion-badge">
            <button [uiOverlayTrigger]="promotionTooltip" class="bookmark-badge">
              <ui-icon-badge icon="gift" alt="Prämienkatalog Badge"></ui-icon-badge>
              <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #promotionTooltip [closeable]="true">
                Dieser Artikel befindet sich im Prämienkatalog.
              </ui-tooltip>
            </button>
          </div>
        </div>
      </div>

      <div class="product-actions">
        <button *ngIf="!(store.isDownload$ | async)" class="cta-availabilities" (click)="showAvailabilities()">
          Vorrätig in anderer Filiale
        </button>
        <button
          class="cta-continue"
          (click)="showPurchasingModal()"
          [disabled]="
            !(isAvailable$ | async) || (fetchingAvailabilities$ | async) || (item?.features && (item?.features)[0]?.key === 'PFO')
          "
        >
          In den Warenkorb
        </button>
      </div>

      <hr />
      <ng-container *ngIf="item.family?.length > 0">
        <div class="product-formats">
          <span class="label">Auch verfügbar als</span>

          <ui-slider [scrollDistance]="250">
            <a
              class="product-family"
              *ngFor="let format of item.family"
              [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'details', 'ean', format.product.ean]"
            >
              <span class="format-detail">
                <img
                  *ngIf="!!format.product?.format"
                  [src]="'/assets/images/OF_Icon_' + format.product?.format + '.svg'"
                  alt="format icon"
                />
                {{ format.product?.formatDetail }}
                <span class="price">{{ format.catalogAvailability?.price?.value?.value | currency: '€' }}</span>
              </span>
            </a>
          </ui-slider>
        </div>

        <hr />
      </ng-container>

      <div class="product-description" *ngIf="item.texts?.length > 0">
        <div class="info">
          {{ item.texts[0].value }}
        </div>

        <div class="product-text">
          <span *ngFor="let text of item.texts | slice: 1">
            <h3 class="header">{{ text.label }}</h3>
            {{ text.value }}
          </span>
          <button class="scroll-top-cta" (click)="scrollTop()">
            <ui-icon class="arrow" icon="arrow" size="20px"></ui-icon>
          </button>
        </div>
      </div>
    </ng-container>
  </div>

  <button *ngIf="store.item$ | async; let item" class="product-recommendations" (click)="showRecommendations = true">
    <span class="label">Empfehlungen</span>
    <img src="assets/images/recommendation_tag.png" alt="recommendation icon" />
  </button>
</ng-container>

<div class="recommendations-overlay" @slideYAnimation *ngIf="showRecommendations">
  <button class="product-button" (click)="showRecommendations = false">{{ (store.item$ | async)?.product?.name }}</button>
  <page-article-recommendations (close)="showRecommendations = false"></page-article-recommendations>
</div>
