<nb-card class="main-card">
  <nb-card-header class="d-flex justify-content-between align-items-start gap-1">
    "{{ indicatorLabel }}" by stories
    <button
      nbButton
      ghost
      shape="round"
      nbTooltip="Cancel"
      (click)="cancel()"
    >
      <nb-icon icon="x-lg"></nb-icon>
    </button>
  </nb-card-header>

  <nb-card-body>
    <div
      *ngIf="!storiesCharts?.length"
      class="text-muted font-italic text-center p-3"
    >
      No metrics recorded for this indicator
    </div>

    <div
      class="d-flex justify-content-end mb-4"
      *ngIf="pagination"
    >
      <tock-pagination
        [pagination]="pagination"
        (onPaginationChange)="paginationChange()"
      ></tock-pagination>
    </div>

    <div
      class="d-flex flex-wrap justify-content-around gap-1"
      *ngIf="storiesCharts?.length"
    >
      <div
        class="text-center mb-4"
        *ngFor="let chart of storiesCharts"
      >
        <span class="initial-capitalize"
          ><strong>{{ chart.name }}</strong></span
        >
        <div
          echarts
          [options]="chart"
          class="chart"
        ></div>
      </div>
    </div>

    <div
      class="d-flex justify-content-end mt-4"
      *ngIf="pagination && pagination.size > 6"
    >
      <tock-pagination
        [pagination]="pagination"
        (onPaginationChange)="paginationChange()"
      ></tock-pagination>
    </div>
  </nb-card-body>
</nb-card>
