<nb-card class="main-card">
  <nb-card-header class="d-flex justify-content-between align-items-start gap-1">
    Distribution of 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 class="stats-line d-flex justify-content-between gap-2 py-2 font-weight-bold">
      <div
        class="pointer"
        (click)="sortBy(SortingCriteria.name)"
      >
        Story name

        <nb-icon
          *ngIf="sortCriteria === SortingCriteria.name && sortDirection"
          icon="chevron-down-outline"
          pack="nebular-essentials"
        ></nb-icon>
        <nb-icon
          *ngIf="sortCriteria === SortingCriteria.name && !sortDirection"
          icon="chevron-up-outline"
          pack="nebular-essentials"
        ></nb-icon>
      </div>

      <div
        class="pointer"
        (click)="sortBy(SortingCriteria.count)"
      >
        Hits
        <nb-icon
          *ngIf="sortCriteria === SortingCriteria.count && sortDirection"
          icon="chevron-down-outline"
          pack="nebular-essentials"
        ></nb-icon>
        <nb-icon
          *ngIf="sortCriteria === SortingCriteria.count && !sortDirection"
          icon="chevron-up-outline"
          pack="nebular-essentials"
        ></nb-icon>
      </div>
    </div>

    <div
      *ngFor="let metric of processedStoriesMetrics"
      class="stats-line d-flex justify-content-between gap-2 py-2"
      [ngClass]="{
        'text-success': metric.ragStory,
        'text-warning': metric.unknownStory,
        'text-danger': metric.deletedStories,
        'font-italic': metric.deletedStories || metric.unknownStory
      }"
    >
      <div>
        {{ metric.name }}
      </div>

      <div>
        {{ metric.count }}
      </div>
    </div>

    <div class="d-flex justify-content-between gap-2 py-2 font-weight-bold">
      <div>TOTAL</div>
      <div>{{ getStoriesHitsSum() }}</div>
    </div>
  </nb-card-body>
</nb-card>
