<div class="d-flex flex-wrap align-items-center">
  <h1 class="flex-grow-1">
    Satisfaction
    <span
      *ngIf="count"
      class="font-weight-normal"
      >({{ count }})</span
    >
  </h1>

  <div class="d-flex">
    <button
      nbButton
      ghost
      shape="round"
      nbTooltip="Refresh dialogs"
      (click)="refresh()"
      class="ml-2"
    >
      <nb-icon icon="arrow-clockwise"></nb-icon>
    </button>

    <button
      nbButton
      ghost
      shape="round"
      nbTooltip="Export all dialogs with rating"
      (click)="exportDialogs()"
      class="ml-2"
    >
      <nb-icon icon="download"></nb-icon>
    </button>
  </div>
</div>

<ng-container *ngIf="satisfactionStat">
  <nb-card class="stats">
    <div class="space space-component3">
      <h5 class="heading1 text-basic">
        <nb-icon
          *ngFor="let _ of getStarArray()"
          icon="star"
        ></nb-icon>
      </h5>
      <span class="text text-hint caption">{{ satisfactionStat.nbUsersRated }} users</span>
    </div>
    <div class="space">
      <div
        class="rating-circle"
        [ngStyle]="getStyles()"
      >
        <span>{{ satisfactionStat.ratingBot.toFixed(1) }}</span>
      </div>
    </div>
  </nb-card>

  <div style="display: flex">
    <nb-card
      class="stats"
      *ngFor="let index of [1, 2, 3, 4, 5]"
    >
      <div class="space space-component3">
        <h5 class="heading1 text-basic">
          <nb-icon
            *ngFor="let _ of [].constructor(index)"
            icon="star"
          ></nb-icon>
        </h5>
        <span class="text text-hint caption">{{ getNbUsersByNote(index) }} users</span>
      </div>
      <div class="space icon-space">
        <nb-toggle
          [value]="index"
          (change)="updateRatingFilter($event)"
          status="basic"
        ></nb-toggle>
      </div>
    </nb-card>
  </div>
</ng-container>

<tock-dialogs-list
  #dialogsList
  [ratingFilter]="ratingFilter"
></tock-dialogs-list>

<tock-scroll-top-button></tock-scroll-top-button>
