<section class="categories-dashboard">
  <div class="categories-dashboard__metrics">
    <app-dashboard-metric labelKey="adminCategories.totalCategories" [value]="stats().total.toString()" />
    <app-dashboard-metric labelKey="adminCategories.visibleCount" [value]="stats().visible.toString()" />
    <app-dashboard-metric labelKey="adminCategories.hiddenCount" [value]="stats().hidden.toString()" />
    <app-dashboard-metric labelKey="adminCategories.emptyCount" [value]="stats().empty.toString()" />
    <app-dashboard-metric labelKey="adminCategories.rootCount" [value]="stats().rootCount.toString()" />
    <app-dashboard-metric labelKey="adminCategories.subCount" [value]="stats().subCount.toString()" />
    <app-dashboard-metric labelKey="adminCategories.missingImagesCount" [value]="stats().missingImages.toString()" />
    <app-dashboard-metric labelKey="adminCategories.missingSeoCount" [value]="stats().missingSeo.toString()" />
    <app-dashboard-metric labelKey="adminCategories.lastModified" [value]="lastModifiedValue()" />
    <app-dashboard-metric labelKey="adminCategories.completionLabel" [value]="stats().completionPercent + '%'" />
  </div>

  <app-card padding="md" class="categories-dashboard__recommend">
    <h4>{{ 'adminCategories.recommendedNext' | translate }}</h4>
    <p>{{ stats().recommendation.labelKey | translate }}</p>
    @if (stats().recommendation.categoryId) {
      <app-button variant="primary" size="sm" (click)="goRecommended()">{{ 'adminProducts.openAction' | translate }}</app-button>
    }
  </app-card>
</section>
