@if (bootstrap()) {
  <section class="homepage-overview" aria-labelledby="homepage-overview-title">
    <div class="homepage-overview__summary">
      <div class="homepage-overview__ring" [style.background]="ringBackground()">
        <span>{{ completionPercent() }}%</span>
      </div>
      <div class="homepage-overview__summary-text">
        <h2 id="homepage-overview-title">{{ 'builder.homepageOverviewTitle' | translate }}</h2>
        <p>{{ 'builder.homepageOverviewSubtitle' | translate }}</p>
        <p class="homepage-overview__counts">
          {{ 'builder.homepageActiveSections' | translate }}: <strong>{{ activeCount() }}</strong>
          &nbsp;&middot;&nbsp;
          {{ 'builder.homepageDisabledSections' | translate }}: <strong>{{ disabledCount() }}</strong>
        </p>
        @if (nextStepKey(); as key) {
          <p class="homepage-overview__next-step">
            <app-icon name="arrowRight" [size]="16" />
            {{ 'builder.overviewNextStepLabel' | translate }}: {{ key | translate }}
          </p>
        } @else {
          <p class="homepage-overview__next-step homepage-overview__next-step--done">
            <app-icon name="checkCircle" [size]="16" />
            {{ 'builder.homepageOverviewComplete' | translate }}
          </p>
        }
        @if (formattedLastSaved(); as saved) {
          <p class="homepage-overview__last-saved">{{ 'builder.brandLastModified' | translate }}: {{ saved }}</p>
        }
      </div>
    </div>

    <ul class="homepage-overview__checklist">
      @for (item of healthItems(); track item.labelKey) {
        <li [class.homepage-overview__check--ok]="item.ok">
          <app-icon [name]="item.ok ? 'checkCircle' : 'circle'" [size]="16" />
          {{ item.labelKey | translate }}
        </li>
      }
    </ul>
  </section>
}