<div class="page-article-details__wrapper">
  @if (store.item$ | async; as item) {
    <div #detailsContainer class="page-article-details__container px-5">
      <div class="page-article-details__product-details mb-3">
        <div class="page-article-details__product-bookmark flex fixed justify-self-end">
          @if (showArchivBadge$ | async) {
            <div class="archiv-badge">
              <button [uiOverlayTrigger]="archivTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]">
                <img src="/assets/images/bookmark_benachrichtigung_archiv.svg" alt="Archiv Badge" />
                <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #archivTooltip [closeable]="true">
                  @if (isAvailable$ | async) {
                    Archivtitel. Wird nicht mehr gedruckt. Artikel ist bestellbar, weil lieferbar.
                  } @else {
                    Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar.
                  }
                </ui-tooltip>
              </button>
            </div>
          }
          @if (showSubscriptionBadge$ | async) {
            <div>
              <button
                [uiOverlayTrigger]="subscribtionTooltip"
                class="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]"
                >
                <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>
          }
          @if (showPromotionBadge$ | async) {
            <div class="promotion-badge">
              <button [uiOverlayTrigger]="promotionTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]">
                <shared-icon-badge icon="gift" alt="Prämienkatalog Badge"></shared-icon-badge>
                <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #promotionTooltip [closeable]="true">
                  Der Artikel ist als Prämie für {{ promotionPoints$ | async }} Punkte erhältlich.
                </ui-tooltip>
              </button>
            </div>
          }
        </div>
        <div class="page-article-details__product-image-recessions flex flex-col items-center">
          <div class="page-article-details__product-image">
            <button class="border-none outline-none bg-transparent relative" (click)="showImages()">
              <img
                class="max-h-[19.6875rem] max-w-[12.1875rem] rounded"
                (load)="loadImage()"
                [src]="item.imageId | productImage: 195 : 315 : true"
                alt="product image"
                />
                @if (imageLoaded$ | async) {
                  <ui-icon
                    class="absolute text-[#A7B9CB] inline-block bottom-[0.875rem] right-[1.125rem]"
                    icon="search_add"
                    size="25px"
                  ></ui-icon>
                }
              </button>
            </div>
            @if (item.reviews?.length > 0) {
              <button
                (click)="showReviews()"
                class="page-article-details__product-recessions flex flex-col mt-2 items-center bg-transparent border-none outline-none"
                >
                <ui-stars [rating]="store.reviewRating$ | async"></ui-stars>
                <div class="text-p2 text-[#0556B4] font-bold">{{ item.reviews.length }} Rezensionen</div>
              </button>
            }
          </div>
          <div class="page-article-details__product-contributors">
            @for (contributor of contributors$ | async; track contributor; let last = $last) {
              <a
                class="text-[#0556B4] font-semibold no-underline text-p2"
                [routerLink]="resultsPath"
                [queryParams]="{ main_qs: contributor, main_author: 'author' }"
                >
                {{ contributor }}{{ last ? '' : ';' }}
              </a>
            }
          </div>
          <div class="page-article-details__product-print justify-self-end" [class.mt-4]="isBadgeVisible$ | async">
            <button class="bg-transparent text-brand font-bold text-lg outline-none border-none p-0" (click)="print()">Drucken</button>
          </div>
          <div class="page-article-details__product-title text-h3 font-bold mb-6">
            {{ item.product?.name }}
          </div>
          <div class="page-article-details__product-misc flex flex-col mb-4">
            @if (item?.product?.format && item?.product?.formatDetail) {
              <div
                class="page-article-details__product-format flex items-center font-bold text-p3"
                >
                @if (item?.product?.format !== '--') {
                  <img
                    class="flex mr-2 h-[1.125rem]"
                    [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
                    [alt]="item.product?.formatDetail"
                    />
                }
                {{ item.product?.formatDetail }}
              </div>
            }
            @if (item?.product?.volume) {
              <div class="page-article-details__product-volume">Band/Reihe {{ item?.product?.volume }}</div>
            }
            <div class="page-article-details__product-publication">{{ publicationDate$ | async }}</div>
          </div>
          <div class="page-article-details__product-price-info flex flex-col mb-4 flex-nowrap self-end">
            @if (price$ | async; as price) {
              <div class="page-article-details__product-price font-bold text-xl self-end">
                {{ price?.value?.value | currency: price?.value?.currency : 'code' }}
              </div>
            }
            @if (price$ | async; as price) {
              <div class="page-article-details__product-price-bound self-end">
                {{ price?.vat?.vatType | vat: (priceMaintained$ | async) }}
              </div>
            }
            @if (store.promotionPoints$ | async; as promotionPoints) {
              <div class="page-article-details__product-points self-end">
                {{ promotionPoints }} Lesepunkte
              </div>
            }
          </div>
          <div class="page-article-details__product-origin-infos flex flex-col mb-4">
            <div class="page-article-details__product-manufacturer" data-name="product-manufacturer">{{ item.product?.manufacturer }}</div>
            @if (item?.product?.locale) {
              <div class="page-article-details__product-language" data-name="product-language">
                {{ item?.product?.locale }}
              </div>
            }
          </div>
          <div class="page-article-details__product-stock flex justify-end items-center">
            @if (store.fetchingTakeAwayAvailability$ | async) {
              <div class="h-5 w-16 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"></div>
            }
            @if (!(store.fetchingTakeAwayAvailability$ | async)) {
              <button
                class="flex flex-row py-4 pl-4"
                type="button"
                [uiOverlayTrigger]="tooltip"
                [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
                (click)="showTooltip()"
                >
                @if (store.takeAwayAvailability$ | async; as takeAwayAvailability) {
                  <ui-icon class="mr-2 mb-1" icon="home" size="15px"></ui-icon>
                  <span class="font-bold text-p3">{{ takeAwayAvailability.inStock || 0 }}x</span>
                }
              </button>
            }
            <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-12" [closeable]="true">
              {{ stockTooltipText$ | async }}
            </ui-tooltip>
          </div>
          <div class="page-article-details__product-ean-specs flex flex-col">
            <div class="page-article-details__product-ean" data-name="product-ean">{{ item.product?.ean }}</div>
            <div class="page-article-details__product-specs">
              @if (item?.specs?.length > 0) {
                {{ (item?.specs)[0]?.value }}
              }
            </div>
          </div>
          <div class="page-article-details__product-availabilities flex flex-row items-center justify-end mt-4">
            @if (store.fetchingTakeAwayAvailability$ | async) {
              <div
                class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
              ></div>
            } @else {
              @if (store.isTakeAwayAvailabilityAvailable$ | async) {
                <div
                  class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center"
                  >
                  <ui-icon class="mx-1" icon="shopping_bag" size="18px"></ui-icon>
                </div>
              }
            }
            @if (store.fetchingPickUpAvailability$ | async) {
              <div
                class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
              ></div>
            } @else {
              @if (store.isPickUpAvailabilityAvailable$ | async) {
                <div
                  #uiOverlayTrigger="uiOverlayTrigger"
                  [uiOverlayTrigger]="orderDeadlineTooltip"
                  class="page-article-details__product-pick-up-availability w-[2.25rem] h-[2.25rem] cursor-pointer bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
                  [class.tooltip-active]="uiOverlayTrigger.opened"
                  >
                  <shared-icon icon="isa-box-out" [size]="24"></shared-icon>
                </div>
              }
              <ui-tooltip [warning]="true" yPosition="above" xPosition="after" [yOffset]="-12" #orderDeadlineTooltip [closeable]="true">
                <b>{{ (store.pickUpAvailability$ | async)?.orderDeadline | orderDeadline }}</b>
              </ui-tooltip>
            }
            @if (store.fetchingDeliveryAvailability$ | async) {
              <div
                class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
              ></div>
            } @else {
              @if (showDeliveryTruck$ | async) {
                <div
                  class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
                  >
                  <ui-icon class="-mb-[0.3125rem] -mt-[0.3125rem] mx-1" icon="truck" size="30px"></ui-icon>
                </div>
              }
            }
            @if (store.fetchingDeliveryB2BAvailability$ | async) {
              <div
                class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
              ></div>
            } @else {
              @if (showDeliveryB2BTruck$ | async) {
                <div
                  class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
                  >
                  <ui-icon class="-mb-[0.625rem] -mt-[0.625rem] mx-1" icon="truck_b2b" size="30px"></ui-icon>
                </div>
              }
            }
            @if (store.isDownload$ | async) {
              <span class="flex flex-row items-center">
                <div class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3">
                  <ui-icon class="mx-1" icon="download" size="18px"></ui-icon>
                </div>
              </span>
            }
          </div>
          <div class="page-article-details__shelf-ssc">
            <div class="page-article-details__ssc flex justify-end my-2 font-bold text-lg">
              @if (fetchingAvailabilities$ | async) {
                <div class="w-52 h-5 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"></div>
              }
              @if (!(fetchingAvailabilities$ | async)) {
                @if (store.sscText$ | async; as sscText) {
                  <div class="text-right">
                    {{ sscText }}
                  </div>
                }
              }
            </div>
            @if (store.isDownload$ | async) {
              <div class="page-article-details__shelfinfo text-right">
                @if (
                  item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label) {
                  <span data-name="compartment">
                    {{ (item?.stockInfos)[0]?.compartment }}
                  </span>
                  /
                  <br />
                  <span data-name="shelf-info-label">
                    {{ (item?.shelfInfos)[0]?.label }}
                  </span>
                } @else {
                  @if (item?.stockInfos && (item?.stockInfos)[0]?.compartment) {
                    {{ (item?.stockInfos)[0]?.compartment }}
                  } @else {
                    @if (item?.shelfInfos && (item?.shelfInfos)[0]?.label) {
                      <span data-name="shelf-info-label">{{ (item?.shelfInfos)[0]?.label }}</span>
                    }
                  }
                }
              </div>
            }
            @if (!(store.isDownload$ | async)) {
              <div class="page-article-details__shelfinfo text-right">
                @if (
                  item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label) {
                  <span data-name="compartment">{{ (item?.stockInfos)[0]?.compartment }}</span>
                  /
                  <br />
                  <span data-name="shelf-info-label">{{ (item?.shelfInfos)[0]?.label }}</span>
                } @else {
                  @if (item?.stockInfos && (item?.stockInfos)[0]?.compartment) {
                    {{ (item?.stockInfos)[0]?.compartment }}
                  } @else {
                    @if (item?.shelfInfos && (item?.shelfInfos)[0]?.label) {
                      {{ (item?.shelfInfos)[0]?.label }}
                    }
                  }
                }
              </div>
            }
          </div>
        </div>
        @if (item.family?.length > 0) {
          <div class="page-article-details__product-formats-container mt-3">
            <hr class="bg-[#E6EFF9] border-t-2" />
            <div class="pt-3">
              <div class="page-article-details__product-formats">
                <span class="mr-2">Auch verfügbar als</span>
                <ui-slider [scrollDistance]="250">
                  @for (format of item.family; track format) {
                    <a
                      class="mr-4 text-[#0556B4] font-bold no-underline px-2"
                      [routerLink]="getDetailsPath(format.product.ean)"
                      queryParamsHandling="preserve"
                      >
                      <span class="flex items-center">
                        @if (!!format.product?.format) {
                          <img
                            class="mr-2"
                            [src]="'/assets/images/OF_Icon_' + format.product?.format + '.svg'"
                            alt="format icon"
                            />
                        }
                        {{ format.product?.formatDetail }}
                        <span class="ml-1">{{ format.catalogAvailability?.price?.value?.value | currency: '€' }}</span>
                      </span>
                    </a>
                  }
                </ui-slider>
              </div>
            </div>
          </div>
        }
        <hr class="bg-[#E6EFF9] border-t-2 my-3" />
        @if (item.texts?.length > 0) {
          <div #description class="page-article-details__product-description flex flex-col flex-grow mb-6">
            <page-article-details-text class="block box-border" [text]="item.texts[0]"></page-article-details-text>
            <div class="box-border">
              @if (!showMore && item?.texts?.length > 1) {
                <button
                  class="font-bold flex flex-row text-[#0556B4] items-center mt-2"
                  (click)="showMore = !showMore"
                  >
                  Mehr
                  <ui-icon class="ml-2" size="15px" icon="arrow"></ui-icon>
                </button>
              }
            </div>
            @if (showMore) {
              <div class="page-article-details__product-description-text flex flex-col whitespace-pre-line break-words box-border">
                @for (text of item.texts | slice: 1; track text) {
                  <span>
                    <h3 class="my-4 text-p2 font-bold">{{ text.label }}</h3>
                    {{ text.value }}
                  </span>
                }
                <button class="font-bold flex flex-row text-[#0556B4] items-center mt-2" (click)="showMore = !showMore">
                  <ui-icon class="transform ml-0 mr-2 rotate-180" size="15px" icon="arrow"></ui-icon>
                  Weniger
                </button>
                <button class="page-article-details__scroll-top-cta" (click)="scrollTop(description)">
                  <ui-icon class="text-[#0556B4]" icon="arrow" size="20px"></ui-icon>
                </button>
              </div>
            }
            <div class="h-28 box-border"></div>
          </div>
        }
      </div>
    }

    <div class="page-article-details__product-recommendations relative">
      @if (store.item$ | async; as item) {
        <button
          class="shadow-[#dce2e9_0px_-2px_18px_0px] mb-5 border-none outline-none flex items-center px-5 h-14 min-h-[3.5rem] bg-white w-full"
          (click)="showRecommendations = true"
          matomoClickCategory="prodict-details"
          matomoClickAction="click"
          matomoClickName="recommendations"
          >
          <span class="uppercase text-[#0556B4] font-bold text-p3">Empfehlungen</span>
          <img class="absolute right-5 -top-[0.125rem] h-12" src="assets/images/recommendation_tag.png" alt="recommendation icon" />
        </button>
      }
    </div>
  </div>

  @if (store.item$ | async; as item) {
    <div
      class="page-article-details__actions absolute bottom-32 left-1/2 -translate-x-1/2 whitespace-nowrap"
      >
      @if (!(store.isDownload$ | async)) {
        <button
          class="text-brand border-2 border-brand bg-white font-bold text-lg px-[1.375rem] py-4 rounded-full mr-[1.875rem]"
          (click)="showAvailabilities()"
          matomoClickCategory="prodict-details"
          matomoClickAction="click"
          matomoClickName="bestaende-in-anderen-filialen"
          >
          Bestände in anderen Filialen
        </button>
      }
      <button
        class="text-white bg-brand border-brand font-bold text-lg px-[1.375rem] py-4 rounded-full border-none no-underline"
        (click)="showPurchasingModal()"
        [disabled]="!(isAvailable$ | async) || (fetchingAvailabilities$ | async) || (item?.features && (item?.features)[0]?.key === 'PFO')"
        matomoClickCategory="prodict-details"
        matomoClickAction="click"
        matomoClickName="in-den-Warenkorb"
        >
        In den Warenkorb
      </button>
    </div>
  }

  @if (showRecommendations) {
    <div class="page-article-details__recommendations-overlay absolute top-0 inset-x-0" @slideYAnimation>
      <page-article-recommendations (close)="showRecommendations = false"></page-article-recommendations>
    </div>
  }

  <!--
  <ng-container *ngIf="!showRecommendations">
    <div #detailsContainer class="page-article-details__container px-5 relative">
      <ng-container *ngIf="store.item$ | async; let item">
        <div class="page-article-details__product-details mb-3">
          <div class="page-article-details__product-bookmark justify-self-end">
            <div *ngIf="showArchivBadge$ | async" class="archiv-badge">
              <button [uiOverlayTrigger]="archivTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]">
                <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="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]"
                >
                <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="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]">
                <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 class="page-article-details__product-image-recessions flex flex-col items-center">
            <div class="page-article-details__product-image">
              <button class="border-none outline-none bg-transparent relative" (click)="showImages()">
                <img
                  class="max-h-[19.6875rem] max-w-[12.1875rem] rounded"
                  (load)="loadImage()"
                  [src]="item.imageId | productImage: 195:315:true"
                  alt="product image"
                  />
                  <ui-icon
                    class="absolute text-[#A7B9CB] inline-block bottom-[0.875rem] right-[1.125rem]"
                    *ngIf="imageLoaded$ | async"
                    icon="search_add"
                    size="25px"
                  ></ui-icon>
                </button>
              </div>

              <button
                (click)="showReviews()"
                class="page-article-details__product-recessions flex flex-col mt-2 items-center bg-transparent border-none outline-none"
                *ngIf="item.reviews?.length > 0"
                >
                <ui-stars [rating]="store.reviewRating$ | async"></ui-stars>

                <div class="text-p2 text-[#0556B4] font-bold">{{ item.reviews.length }} Rezensionen</div>
              </button>
            </div>

            <div class="page-article-details__product-contributors">
              <a
                *ngFor="let contributor of contributors$ | async; let last = last"
                class="text-[#0556B4] font-semibold no-underline text-p2"
                [routerLink]="resultsPath"
                [queryParams]="{ main_qs: contributor, main_author: 'author' }"
                >
                {{ contributor }}{{ last ? '' : ';' }}
              </a>
            </div>

            <div class="page-article-details__product-print justify-self-end" [class.mt-4]="isBadgeVisible$ | async">
              <button class="bg-transparent text-brand font-bold text-lg outline-none border-none p-0" (click)="print()">Drucken</button>
            </div>

            <div class="page-article-details__product-title text-h3 font-bold mb-6">
              {{ item.product?.name }}
            </div>

            <div class="page-article-details__product-misc flex flex-col mb-4">
              <div
                class="page-article-details__product-format flex items-center font-bold text-p3"
                *ngIf="item?.product?.format && item?.product?.formatDetail"
                >
                <img
                  *ngIf="item?.product?.format !== '--'"
                  class="flex mr-2 h-[1.125rem]"
                  [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
                  [alt]="item.product?.formatDetail"
                  />
                  {{ item.product?.formatDetail }}
                </div>

                <div class="page-article-details__product-volume" *ngIf="item?.product?.volume">Band/Reihe {{ item?.product?.volume }}</div>

                <div class="page-article-details__product-publication">{{ publicationDate$ | async }}</div>
              </div>

              <div class="page-article-details__product-price-info flex flex-col mb-4 flex-nowrap self-end">
                <div class="page-article-details__product-price font-bold text-xl self-end" *ngIf="price$ | async; let price">
                  {{ price?.value?.value | currency: price?.value?.currency:'code' }}
                </div>
                <div *ngIf="price$ | async; let price" class="page-article-details__product-price-bound self-end">
                  {{ price?.vat?.vatType | vat: (priceMaintained$ | async) }}
                </div>
                <div class="page-article-details__product-points self-end" *ngIf="store.promotionPoints$ | async; let promotionPoints">
                  {{ promotionPoints }} Lesepunkte
                </div>
              </div>

              <div class="page-article-details__product-origin-infos flex flex-col mb-4">
                <div class="page-article-details__product-manufacturer" data-name="product-manufacturer">{{ item.product?.manufacturer }}</div>

                <div class="page-article-details__product-language" *ngIf="item?.product?.locale" data-name="product-language">
                  {{ item?.product?.locale }}
                </div>
              </div>

              <div class="page-article-details__product-stock flex justify-end items-center">
                <div class="h-5 w-16 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]" *ngIf="store.fetchingTakeAwayAvailability$ | async"></div>
                <button
                  class="flex flex-row py-4 pl-4"
                  type="button"
                  [uiOverlayTrigger]="tooltip"
                  [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
                  (click)="showTooltip()"
                  *ngIf="!(store.fetchingTakeAwayAvailability$ | async)"
                  >
                  <ng-container *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability">
                    <ui-icon class="mr-2 mb-1" icon="home" size="15px"></ui-icon>
                    <span class="font-bold text-p3">{{ takeAwayAvailability.inStock || 0 }}x</span>
                  </ng-container>
                </button>
                <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-12" [closeable]="true">
                  {{ stockTooltipText$ | async }}
                </ui-tooltip>
              </div>

              <div class="page-article-details__product-ean-specs flex flex-col">
                <div class="page-article-details__product-ean" data-name="product-ean">{{ item.product?.ean }}</div>

                <div class="page-article-details__product-specs">
                  <ng-container *ngIf="item?.specs?.length > 0">
                    {{ (item?.specs)[0]?.value }}
                  </ng-container>
                </div>
              </div>

              <div class="page-article-details__product-availabilities flex flex-row items-center justify-end mt-4">
                <div
                  class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
                  *ngIf="store.fetchingTakeAwayAvailability$ | async; else showAvailabilityTakeAwayIcon"
                ></div>
                <ng-template #showAvailabilityTakeAwayIcon>
                  <div
                    *ngIf="store.isTakeAwayAvailabilityAvailable$ | async"
                    class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center"
                    >
                    <ui-icon class="mx-1" icon="shopping_bag" size="18px"> </ui-icon>
                  </div>
                </ng-template>

                <div
                  class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
                  *ngIf="store.fetchingPickUpAvailability$ | async; else showAvailabilityPickUpIcon"
                ></div>
                <ng-template #showAvailabilityPickUpIcon>
                  <div
                    #uiOverlayTrigger="uiOverlayTrigger"
                    [uiOverlayTrigger]="orderDeadlineTooltip"
                    *ngIf="store.isPickUpAvailabilityAvailable$ | async"
                    class="page-article-details__product-pick-up-availability w-[2.25rem] h-[2.25rem] cursor-pointer bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
                    [class.tooltip-active]="uiOverlayTrigger.opened"
                    >
                    <shared-icon icon="isa-box-out" [size]="24"></shared-icon>
                  </div>

                  <ui-tooltip [warning]="true" yPosition="above" xPosition="after" [yOffset]="-12" #orderDeadlineTooltip [closeable]="true">
                    <b>{{ (store.pickUpAvailability$ | async)?.orderDeadline | orderDeadline }}</b>
                  </ui-tooltip>
                </ng-template>

                <div
                  class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
                  *ngIf="store.fetchingDeliveryAvailability$ | async; else showAvailabilityDeliveryIcon"
                ></div>
                <ng-template #showAvailabilityDeliveryIcon>
                  <div
                    *ngIf="showDeliveryTruck$ | async"
                    class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
                    >
                    <ui-icon class="-mb-[0.3125rem] -mt-[0.3125rem] mx-1" icon="truck" size="30px"></ui-icon>
                  </div>
                </ng-template>

                <div
                  class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
                  *ngIf="store.fetchingDeliveryB2BAvailability$ | async; else showAvailabilityDeliveryB2BIcon"
                ></div>
                <ng-template #showAvailabilityDeliveryB2BIcon>
                  <div
                    *ngIf="showDeliveryB2BTruck$ | async"
                    class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
                    >
                    <ui-icon class="-mb-[0.625rem] -mt-[0.625rem] mx-1" icon="truck_b2b" size="30px"> </ui-icon>
                  </div>
                </ng-template>

                <span *ngIf="store.isDownload$ | async" class="flex flex-row items-center">
                  <div class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3">
                    <ui-icon class="mx-1" icon="download" size="18px"></ui-icon>
                  </div>
                </span>
              </div>

              <div class="page-article-details__shelf-ssc">
                <div class="page-article-details__ssc flex justify-end my-2 font-bold text-lg">
                  <div class="w-52 h-5 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]" *ngIf="fetchingAvailabilities$ | async"></div>
                  <ng-container *ngIf="!(fetchingAvailabilities$ | async)">
                    <div class="text-right" *ngIf="store.sscText$ | async; let sscText">
                      {{ sscText }}
                    </div>
                  </ng-container>
                </div>

                <div class="page-article-details__shelfinfo text-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="page-article-details__shelfinfo text-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>

            <div class="page-article-details__product-formats-container mt-3" *ngIf="item.family?.length > 0">
              <hr class="bg-[#E6EFF9] border-t-2" />
              <div class="pt-3">
                <div class="page-article-details__product-formats">
                  <span class="mr-2">Auch verfügbar als</span>

                  <ui-slider [scrollDistance]="250">
                    <a
                      class="mr-4 text-[#0556B4] font-bold no-underline px-2"
                      *ngFor="let format of item.family"
                      [routerLink]="getDetailsPath(format.product.ean)"
                      queryParamsHandling="preserve"
                      >
                      <span class="flex items-center">
                        <img
                          class="mr-2"
                          *ngIf="!!format.product?.format"
                          [src]="'/assets/images/OF_Icon_' + format.product?.format + '.svg'"
                          alt="format icon"
                          />
                          {{ format.product?.formatDetail }}
                          <span class="ml-1">{{ format.catalogAvailability?.price?.value?.value | currency: '€' }}</span>
                        </span>
                      </a>
                    </ui-slider>
                  </div>
                </div>
              </div>

              <hr class="bg-[#E6EFF9] border-t-2 my-3" />

              <div #description class="page-article-details__product-description flex flex-col flex-grow" *ngIf="item.texts?.length > 0">
                <page-article-details-text [text]="item.texts[0]"> </page-article-details-text>

                <button
                  class="font-bold flex flex-row text-[#0556B4] items-center mt-2"
                  *ngIf="!showMore && item?.texts?.length > 1"
                  (click)="showMore = !showMore"
                  >
                  Mehr <ui-icon class="ml-2" size="15px" icon="arrow"></ui-icon>
                </button>

                <div *ngIf="showMore" class="page-article-details__product-description-text flex flex-col whitespace-pre-line break-words">
                  <span *ngFor="let text of item.texts | slice: 1">
                    <h3 class="my-4 text-p2 font-bold">{{ text.label }}</h3>
                    {{ text.value }}
                  </span>

                  <button class="font-bold flex flex-row text-[#0556B4] items-center mt-2" (click)="showMore = !showMore">
                    <ui-icon class="transform ml-0 mr-2 rotate-180" size="15px" icon="arrow"></ui-icon> Weniger
                  </button>

                  <button class="page-article-details__scroll-top-cta" (click)="scrollTop(description)">
                    <ui-icon class="text-[#0556B4]" icon="arrow" size="20px"></ui-icon>
                  </button>
                </div>

                <div class="min-h-[6.25rem]"></div>
              </div>

              <ng-container *ngIf="!showRecommendations">
                <div
                  *ngIf="store.item$ | async; let item"
                  class="page-article-details__actions w-full sticky text-center left-0 -mb-4 bottom-10 z-fixed"
                  >
                  <button
                    *ngIf="!(store.isDownload$ | async)"
                    class="text-brand border-2 border-brand bg-white font-bold text-lg px-[1.375rem] py-4 rounded-full mr-[1.875rem]"
                    (click)="showAvailabilities()"
                    >
                    Bestände in anderen Filialen
                  </button>
                  <button
                    class="text-white bg-brand border-brand font-bold text-lg px-[1.375rem] py-4 rounded-full border-none no-underline"
                    (click)="showPurchasingModal()"
            [disabled]="
              !(isAvailable$ | async) || (fetchingAvailabilities$ | async) || (item?.features && (item?.features)[0]?.key === 'PFO')
            "
                    >
                    In den Warenkorb
                  </button>
                </div>
              </ng-container>
              <div class="page-article-details__product-recommendations sticky bottom-0 -mx-5">
                <button
                  *ngIf="store.item$ | async; let item"
                  class="shadow-[#dce2e9_0px_-2px_18px_0px] sticky bottom-4 border-none outline-none left-0 right-0 flex items-center px-5 h-14 min-h-[3.5rem] bg-white w-full"
                  (click)="showRecommendations = true"
                  >
                  <span class="uppercase text-[#0556B4] font-bold text-p3">Empfehlungen</span>
                  <img class="absolute right-5 bottom-3 h-12" src="assets/images/recommendation_tag.png" alt="recommendation icon" />
                </button>
              </div>
            </ng-container>
          </div>
        </ng-container>

        <div class="page-article-details__recommendations-overlay absolute rounded-t" @slideYAnimation *ngIf="showRecommendations">
          <page-article-recommendations (close)="showRecommendations = false"></page-article-recommendations>
        </div> -->
