<div class="health-widget">
  <div class="health-widget__head">
    <h4>{{ titleKey() | translate }}</h4>
    <span class="health-widget__percent">{{ completionPercent() }}%</span>
  </div>
  <div class="health-widget__bar" role="progressbar" [attr.aria-valuenow]="completionPercent()" aria-valuemin="0" aria-valuemax="100">
    <div class="health-widget__bar-fill" [style.width.%]="completionPercent()"></div>
  </div>
  <ul class="health-widget__list">
    @for (item of items(); track item.labelKey) {
      <li [class.health-widget__list-item--done]="item.done">
        <span class="health-widget__icon" aria-hidden="true">{{ item.done ? '✓' : '○' }}</span>
        <span>{{ item.labelKey | translate }}</span>
      </li>
    }
  </ul>
</div>
