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