<section class="review-list section">
  @if (showSummary) {
    <app-rating-summary [summary]="ratingSummary" [loading]="loading" />
  }

  <app-review-form [submitting]="submitting" (submitReview)="submitReview.emit($event)" />

  @if (loading) {
    <div class="skeleton-list">
      <div class="skeleton-card"></div>
      <div class="skeleton-card"></div>
    </div>
  } @else if (result?.items?.length) {
    <div class="review-items">
      @for (review of result!.items; track review.id) {
        <app-review-card [review]="review" />
      }
    </div>
  } @else {
    <app-empty-state class="empty" [title]="'productDetails.reviewsEmpty' | translate" />
  }

  @if (result && totalPages > 1 && mode === 'pages') {
    <div class="pager">
      <button type="button" (click)="previousPage()" [disabled]="result.page <= 1">{{ 'productDetails.previous' | translate }}</button>
      <span>{{ 'productDetails.pageOf' | translate:{ page: result.page, total: totalPages } }}</span>
      <button type="button" (click)="nextPage()" [disabled]="result.page >= totalPages">{{ 'productDetails.next' | translate }}</button>
    </div>
  }

  @if (result && mode === 'load-more' && result.items.length < result.total) {
    <div class="load-more-wrap">
      <button type="button" class="load-more" (click)="onLoadMore()" [disabled]="loading">
        {{ 'productDetails.loadMore' | translate }}
      </button>
      <small>{{ 'productDetails.showingOf' | translate:{ shown: result.items.length, total: result.total } }}</small>
    </div>
  }
</section>
