<div class="review-health" [class.review-health--compact]="compact()">
  <div class="review-health__bar"><div class="review-health__bar-fill" [style.width.%]="completionPercent()"></div></div>
  <span class="review-health__percent">{{ completionPercent() }}%</span>
  @if (!compact()) {
    <ul class="review-health__list">
      @for (item of items(); track item.labelKey) {
        <li [class.review-health__list-item--done]="item.done">
          <span aria-hidden="true">{{ item.done ? '✓' : '○' }}</span>
          <span>{{ item.labelKey | translate }}</span>
        </li>
      }
    </ul>
  }
</div>
