<app-modal id="product-review-modal">
  <div class="modal-wrapper" *ngIf="review">
    <div class="header">
      <lib-icon (click)="closeDialog()" height="21px" class="close-icon" name="close" alt="close"></lib-icon>
    </div>
    <div class="content">
      <div class="content-header">
        <div class="review-title align-center">
          <span>{{ review.employeeReviews }} Rezensionen</span>
        </div>
        <div class="review-stars-wrapper align-center">
          <ng-container *ngFor="let star of fullStars | async">
            <lib-icon width="17px" name="Star_full" type="png"></lib-icon>
          </ng-container>
          <ng-container *ngFor="let star of halfStars | async">
            <lib-icon width="17px" name="Star_half" type="png"></lib-icon>
          </ng-container>
          <ng-container *ngFor="let star of emptyStars | async">
            <lib-icon width="17px" name="Star_empty" type="png"></lib-icon>
          </ng-container>
          <span>{{ starsDisplay | decimalSeparator: ',' }} Sterne</span>
        </div>
      </div>
    </div>
    <div class="review-list">
      <ng-container *ngFor="let item of review.reviews; let i = index">
        <div class="separator"></div>
        <div class="review">
          <div class="stars-title">
            <div class="stars">
              <ng-container *ngFor="let star of getFullStarsFromRate(item.stars)">
                <lib-icon width="12px" name="Star_full" type="png"></lib-icon>
              </ng-container>
              <ng-container *ngFor="let star of getHalfStarsFromRate(item.stars)">
                <lib-icon width="12px" name="Star_half" type="png"></lib-icon>
              </ng-container>
              <ng-container *ngFor="let star of getEmptyStarsFromRate(item.stars)">
                <lib-icon width="12px" name="Star_empty" type="png"></lib-icon>
              </ng-container>
            </div>
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
          </div>
          <div class="author-date">
            <div class="author">
              <span>{{ item.author }} |</span>
            </div>
            <div class="date">
              <span>{{ item.date | date: 'dd.MM.yy' }}</span>
            </div>
          </div>
          <div class="desciption" id="details-container" [ngClass]="{ 'mb-26': item.content.length <= 150 }" *ngIf="!getMoreBtn(i)">
            <span id="details-text">{{ reviewDescriptionText(item.content) }}</span>
            <span class="more-btn img" (click)="toggleMore(i)" *ngIf="item.content.length > 150"
              >Mehr
              <lib-icon pl="8px" name="Arrow_Next-with-body" alt="more"></lib-icon>
            </span>
          </div>
          <div class="desciption-full" id="details-container" *ngIf="getMoreBtn(i)">
            <span id="details-text">{{ item.content }}</span>
            <span class="more-btn img" (click)="toggleMore(i)"
              >Weniger
              <lib-icon pl="8px" name="Arrow_back" alt="less"></lib-icon>
            </span>
          </div>
        </div>
      </ng-container>
      <div class="separator"></div>
    </div>
    <div class="add-review align-center" *ngIf="!reviewFeatureDisabled">
      <app-button [primary]="true" (action)="openAddReview()">Rezension schreiben</app-button>
    </div>
  </div>
  <app-add-product-review #addReview></app-add-product-review>
</app-modal>
