<section class="content-dashboard">
  <div class="content-dashboard__metrics">
    <app-dashboard-metric labelKey="contentManagement.publishedPages" [value]="health().published.toString()" />
    <app-dashboard-metric labelKey="contentManagement.draftPages" [value]="health().draft.toString()" />
    <app-dashboard-metric labelKey="contentManagement.missingLegalPages" [value]="health().missingRequiredLegal.length.toString()" />
    <app-dashboard-metric labelKey="contentManagement.seoHealth" [value]="seoHealthValue()" />
    <app-dashboard-metric labelKey="contentManagement.lastEdited" [value]="lastEditedValue()" />
  </div>

  <div class="content-dashboard__row">
    <app-card padding="md" class="content-dashboard__health">
      <app-content-health-widget
        titleKey="contentManagement.completionLabel"
        [items]="legalItems()"
        [completionPercent]="health().completionPercent"
      />
    </app-card>

    <app-card padding="md" class="content-dashboard__recommend">
      <h4>{{ 'contentManagement.recommendedNext' | translate }}</h4>
      <p>{{ health().recommendation.labelKey | translate }}</p>
      <div class="content-dashboard__recommend-actions">
        @if (health().recommendation.pageId) {
          <app-button variant="primary" size="sm" (click)="goRecommended()">{{ 'contentManagement.openAction' | translate }}</app-button>
        } @else if (health().recommendation.kind === 'createLegal') {
          <app-button variant="primary" size="sm" (click)="createPage.emit()">{{ 'builder.createPage' | translate }}</app-button>
        }
      </div>
    </app-card>
  </div>
</section>
