<app-metrics-page
  pageTitle="activity.processing-activity.title"
  pageSubtitle="activity.processing-activity.subtitle"
  [columns]="columns"
  [sidebarFields]="sidebarFields"
  [items]="service.items()"
  [loading]="service.loading()"
  [loadingMore]="service.loadingMore()"
  [availableMonths]="service.availableMonths()"
  (monthRangeChange)="onMonthRangeChange($event)"
  (searchChange)="onSearchChange($event)"
  (loadNextPage)="onLoadNextPage()"
  (downloadRequested)="onDownloadRequested($event)">

  <app-metrics-filters toolbar-extra
    [showSyntheticStatus]="true"
    [syntheticStatuses]="syntheticStatuses"
    [activeSyntheticStatuses]="activeSyntheticStatuses()"
    [syntheticStatusLabels]="syntheticStatusLabels"
    [filterColumns]="filterColumns"
    [activeBooleanConditions]="[]"
    [activeNumericConditions]="service.numericConditions()"
    [selectedMonth]="selectedMonth()"
    [activeDateConditions]="activeDateConditions()"
    (filtersApplied)="onFiltersApplied($event)">
  </app-metrics-filters>

  <!-- Stat cards -->
  <div stat-cards class="stat-cards">
    <div class="stat-card">
      <div class="title-xxs">{{ 'activity.processing.resources-processed' | translate }}</div>
      <div class="display-s">{{ service.usageStats().resourcesProcessed | compactNumber }}</div>
    </div>
    <div class="stat-card">
      <div class="title-xxs">{{ 'activity.processing.paragraphs-processed' | translate }}</div>
      <div class="display-s">{{ service.usageStats().paragraphsProcessed | compactNumber }}</div>
    </div>
  </div>

</app-metrics-page>
