<div
  id="product-detail-container"
  class="product-detail-container"
  #productDetailContainer
  *ngIf="product"
  [@shrinkMainCard]="expanded"
  (scroll)="scrollHandler($event)"
>
  <div class="feature-icons" *ngIf="showFeatures">
    <lib-icon name="subscription_tag" alt="subscription icon" type="png" height="48px" *ngIf="isSubscription"> </lib-icon>
    <lib-icon name="gift_tag" alt="gift icon" type="png" height="48px" *ngIf="isGiftable"></lib-icon>
    <lib-icon name="recommendation_tag" alt="recommendation icon" type="png" height="48px" *ngIf="isRecommendation"> </lib-icon>
  </div>

  <div [@shrinkTitle]="!expanded" (click)="expand()">{{ product.title }}</div>
  <div class="general-details" *ngIf="expanded">
    <div class="product-image-container">
      <img [src]="product.imageId | bookImageUrl: 469:575 | async" class="product-image" alt="book image" (click)="openGallery()" />
      <div class="img-magnifying-glass" (click)="openGallery()">
        <lib-icon name="magnifying-glass" width="27px"></lib-icon>
      </div>
    </div>
    <div class="product-info-container">
      <div class="product-info">
        <div class="autor-print">
          <div class="autor standart-text align-left">
            <span>{{ product.author }}</span>
          </div>
          <div class="print align-right" [ngClass]="{ 'print-btn-move-down': showFeatures }">
            <span (click)="printerSelect()">Drucken</span>
          </div>
        </div>
        <div class="title align-left product-title">
          <span>{{ product.title }}</span>
        </div>

        <div class="type-price">
          <div class="align-left">
            <div class="type">
              <div>
                <lib-icon name="Icon_{{ product.formatIcon }}" mt="4px" height="17px"></lib-icon>
              </div>
              <div>
                <span>{{ product.format }}</span>
              </div>
            </div>
            <div class="volume-edition">
              <span
                >{{ product.volume }}
                <span *ngIf="product.volume && product.edition">|</span>
                {{ product.edition }}</span
              >
            </div>
            <div class="publication">
              <span>{{ product.publicationDate }}</span>
            </div>
          </div>
          <div>
            <div class="price align-right">
              <span>{{ product.price | bookPrice }} {{ product.currency }}</span>
            </div>
            <div class="promo-points align-right">
              <span>{{ product.promoPoints }} Lesepunkte</span>
            </div>
          </div>
        </div>
        <div class="publisher-quantity">
          <div class="publisher standart-text align-left">
            <span>{{ product.publisher }}</span>
          </div>
          <div class="quantity-category">
            <div
              class="quantity-wrapper align-right"
              [ngClass]="{ 'stock-loading': !stockInfoLoaded }"
              *ngIf="product.formatIcon !== 'EB' && product.formatIcon !== 'DL'"
            >
              <div class="home-icon" *ngIf="stockInfoLoaded">
                <lib-icon name="House_Icon_grey" height="22px"></lib-icon>
              </div>
              <div class="stock-quantity" *ngIf="stockInfoLoaded">
                <span>{{ product.quantity ? product.quantity : 0 }}x</span>
              </div>
              <div *ngIf="!stockInfoLoaded"></div>
              <div *ngIf="!stockInfoLoaded">
                <app-stock-info-loading></app-stock-info-loading>
              </div>
            </div>
            <div class="e-book-download align-right" *ngIf="product.formatIcon === 'EB' || product.formatIcon === 'DL'">
              <div class="download-icon">
                <lib-icon name="download_product_grey" mt="4px" height="17px"></lib-icon>
              </div>
              <div class="download-text">
                <span>Download</span>
              </div>
            </div>
            <div class="category align-right" *ngIf="product.formatIcon === 'EB' || product.formatIcon === 'DL'">
              <span>{{ product.assortment }}</span>
            </div>
          </div>
        </div>
        <div class="lang-ean-age-availability-status">
          <div class="lang-ean-age">
            <div class="languages standart-text">
              <span
                >{{ product.genre.length > 20 ? product.genre.substring(0, 20) + '...' : product.genre }}
                <span *ngIf="product.genre && product.locale">|</span>
                {{ product.locale }}</span
              >
            </div>
            <div class="ean standart-text">
              <span>{{ product.eanTag }}</span>
            </div>
            <div class="recommanded-age standart-text">
              <span>{{ product.recommandedAge }}</span>
            </div>
          </div>
          <div class="avilability-status" *ngIf="!(showAvLoading | async)">
            <div class="status-icons" *ngIf="!(isDownload | async) && !inTheCartButtonDisabled">
              <div class="align-right ship-icon align-right" *ngIf="(shippingAvailable | async) && !(deliveryError$ | async)">
                <lib-icon name="Truck_Icon_grey" height="17px"></lib-icon>
              </div>
              <div class="align-right ship-icon align-right" *ngIf="deliveryError$ | async">
                <lib-icon
                  name="Icon_Truck_Questionmark"
                  mt="-4px"
                  height="22px"
                  tooltip="{{ deliveryError$ | async }}"
                  placement="top"
                  delay="200"
                ></lib-icon>
              </div>
              <div class="align-right send-icon" *ngIf="(storeAvailable | async) && !(storeError$ | async)">
                <lib-icon name="Package_Icon_grey" height="18px"></lib-icon>
              </div>
              <div class="align-right send-icon" *ngIf="storeError$ | async">
                <lib-icon
                  name="Icon_Pickup_Questionmark"
                  mt="-4px"
                  height="22px"
                  tooltip="{{ storeError$ | async }}"
                  placement="top"
                  delay="200"
                ></lib-icon>
              </div>
            </div>
            <div class="availability-status-text align-right">
              <span *ngIf="availabilityStatus">{{ availabilityStatus }}</span
              ><span *ngIf="availabilityStatus && availabilityStatus"> - </span>
              <span *ngIf="availabilityStatusText">{{ availabilityStatusText }}</span>
            </div>
          </div>
          <ng-container>
            <div *ngIf="showAvLoading | async">
              <app-availability-loading></app-availability-loading>
            </div>
          </ng-container>
          <div></div>
          <div class="category align-right" *ngIf="!(isDownload | async)">
            <span>{{ product.assortment }}</span>
          </div>
        </div>
        <div
          class="product-staus-info"
          [ngClass]="{ 'partly-loaded': !fullyLoaded }"
          *ngIf="(productReview$ | async)?.employeeReviews || (fullStars | async)"
        >
          <div class="stars-wrapper">
            <ng-container *ngFor="let star of fullStars | async">
              <lib-icon name="Star_full" width="12px" type="png"></lib-icon>
            </ng-container>
            <ng-container *ngFor="let star of halfStars | async">
              <lib-icon name="Star_half" width="12px" type="png"></lib-icon>
            </ng-container>
            <ng-container *ngFor="let star of emptyStars | async">
              <lib-icon name="Star_empty" width="12px" type="png"></lib-icon>
            </ng-container>
          </div>
          <div class="rating-status" (click)="ratingInfo()" *ngIf="productReview$ | async">
            <span>{{ (productReview$ | async)?.employeeReviews }} Rezensionen</span>
          </div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
  <div class="separator" *ngIf="expanded"></div>
  <div class="product-details" *ngIf="expanded">
    <ng-container *ngIf="product.fullDescription && product.fullDescription.length > 0 && showNoDescription === false; else noDescription">
      <ng-container *ngIf="product.fullDescription.length > 100">
        <div class="details" id="details-container" *ngIf="!moreBtn">
          <span id="details-text">{{ product.fullDescription | descriptionText }}</span>
          <span class="more-btn" (click)="toggleMore('more')"
            >Mehr
            <lib-icon name="Arrow_Next-with-body" pl="8px" alt="more"></lib-icon>
          </span>
        </div>
        <div class="details-full" id="details-container" *ngIf="moreBtn">
          <span id="details-text" [innerHTML]="product.fullDescription"></span>
          <span class="more-btn opened" (click)="toggleMore('less')"
            >Weniger
            <lib-icon name="Arrow_back" pl="8px" alt="less"></lib-icon>
          </span>
        </div>
      </ng-container>

      <ng-container *ngIf="product.fullDescription && product.fullDescription.length <= 100">
        <div class="details" id="details-container">
          <span id="details-text" [innerHTML]="product.fullDescription"></span>
        </div>
      </ng-container>
    </ng-container>
    <ng-template #noDescription>
      <div class="details" id="details-container">
        <span id="details-text">Für diesen Artikel ist keine Beschreibung verfügbar</span>
      </div>
    </ng-template>
    <div class="actions align-right" [ngClass]="{ 'action-partly-loaded': !fullyLoaded }">
      <app-button (action)="openBranchesAvailabilityModal()" *ngIf="product.formatIcon !== 'EB' && product.formatIcon !== 'DL'"
        >weitere Verfügbarkeiten</app-button
      >
      <app-button
        [primary]="true"
        [load]="true"
        [stayOnPage]="true"
        [disabled]="inTheCartButtonDisabled"
        (loaded)="contentLoaded()"
        (action)="openModal()"
        #addtocart
        >In den Warenkorb</app-button
      >
    </div>
  </div>
  <app-product-other-formats [productFormats]="product.otherFormats" [detailsExpanded]="detailsExpanded" #otherformats>
  </app-product-other-formats>
  <lib-photo-gallery
    *ngIf="item"
    #photoGallery
    [productId]="item.id"
    [images]="images$ | async"
    [title]="product.title"
  ></lib-photo-gallery>
</div>
<div loading="true" *ngIf="!product && !loadingError">
  <app-product-details-loading></app-product-details-loading>
</div>
<ng-container *ngIf="productReview$">
  <app-product-review #productReview [review]="productReview$ | async"></app-product-review>
</ng-container>
<!-- <app-loading [text]="'Inhalte werden geladen'"></app-loading> -->

<ng-container *ngIf="loadingError">
  <div class="no-data-container">
    <span>Buch konnte nicht geladen werden</span>
  </div>
</ng-container>

<ng-container
  *ngIf="
    item &&
    product &&
    ((storeAvLoaded === true && shippingAvLoaded === true) || downloadLoaded === true) &&
    ((takeNowAvailable | async) || (storeAvailable | async) || (shippingAvailable | async) || (downloadAvailable | async))
  "
>
  <app-checkout
    #checkout
    (closed)="cartActionCompleted($event)"
    [currentPickUpDate]="currentPickUpDate"
    [currentDeliveryDate]="currentDeliveryDate"
    [book]="item"
    [availability]="availability"
    [avpickupprice]="pickUpPrice"
    [avdeliveryprice]="deliveryPrice"
    [avdownloadprice]="downloadPrice"
    [isDownload]="product.formatIcon === 'EB' || product.formatIcon === 'DL'"
  ></app-checkout>
</ng-container>

<ng-container *ngIf="item && loadBranchesInfoComponent">
  <app-branches-avalability-overview
    (destroymodal)="destroyAvailabilityModal($event)"
    [item]="item"
    #branchesAvailabilityInfo
  ></app-branches-avalability-overview>
</ng-container>

<app-printer-selection #printModal (print)="print($event)"></app-printer-selection>

<div class="recommendations" [@shrinkSecondary]="!expanded" *ngIf="item && !loadingError">
  <div class="header" *ngIf="expanded" (click)="expand()">
    <lib-icon name="recommendation_tag" alt="recommendation icon" type="png" height="48px" class="recommendation-card-icon"></lib-icon>
    <span>Empfehlungen</span>
  </div>

  <app-recommendations [book]="item" #recommendations></app-recommendations>
</div>
