<app-metrics-page
  pageTitle="activity.cost-token.title"
  pageSubtitle="activity.cost-token.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]="false"
    [filterColumns]="filterColumns"
    [activeBooleanConditions]="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.cost-token.total-billed-tokens' | translate }}</div>
      <div class="display-s">{{ service.usageStats().nucliaTokensBilled | compactNumber }}</div>
    </div>
  </div>
</app-metrics-page>
