<div class="moderation-dashboard">
  <div class="moderation-dashboard__metrics">
    <app-dashboard-metric labelKey="adminModeration.status.pending" [value]="stats().pending.toString()" />
    <app-dashboard-metric labelKey="adminModeration.status.approved" [value]="stats().approved.toString()" />
    <app-dashboard-metric labelKey="adminModeration.status.rejected" [value]="stats().rejected.toString()" />
    <app-dashboard-metric labelKey="adminModeration.reportedCount" [value]="stats().reported.toString()" />
    <app-dashboard-metric labelKey="adminModeration.status.spam" [value]="stats().spam.toString()" />
    <app-dashboard-metric labelKey="adminModeration.averageRating" [value]="stats().averageRating !== null ? stats().averageRating!.toString() : ('adminModeration.notAvailable' | translate)" />
    <app-dashboard-metric labelKey="adminModeration.moderationHealth" [value]="stats().moderationHealthPercent + '%'" />
  </div>

  <app-card padding="sm" class="moderation-dashboard__activity">
    <h4>{{ 'adminOrders.recentActivity' | translate }}</h4>
    @if (stats().recentActivity.length === 0) {
      <p>{{ 'adminOrders.noRecentActivity' | translate }}</p>
    } @else {
      <ul>
        @for (entry of stats().recentActivity; track entry.timestamp + entry.reviewId) {
          <li>{{ entry.timestamp | date:'short' }} — {{ entry.productName }} — {{ activityText(entry) }}</li>
        }
      </ul>
    }
  </app-card>
</div>
