<section class="rating-summary card section">
  @if (loading) {
    <div class="rating-skeleton">
      <div class="line w40"></div>
      <div class="line w60"></div>
      <div class="line w100"></div>
      <div class="line w100"></div>
    </div>
  } @else if (summary) {
    <div class="headline">
      <strong class="average">{{ summary.average | number:'1.1-1' }}</strong>
      <app-stars [rating]="summary.average" size="lg" />
      <span class="total">{{ 'productDetails.reviewsCountLabel' | translate:{ count: summary.totalReviews } }}</span>
    </div>

    <div class="distribution">
      @for (entry of summary.distribution; track entry.stars) {
        <div class="distribution-row">
          <span>{{ entry.stars }}★</span>
          <progress [value]="entry.share" max="1"></progress>
          <small>{{ entry.count }} ({{ entry.share | percent:'1.0-0' }})</small>
        </div>
      }
    </div>
  }
</section>
