<div class="wrapper">
  <div class="content">
      <div>
          <button class="button float-right mr-1" [routerLink]="['/groups/', id]"><i class="fas fa-arrow-left"></i> Powrót</button>
          <div style="clear: both;"></div>
        </div>
    <h1>{{group?.name}}</h1>
    <h3> Ranking {{setRankingTypeTitle()}}</h3>
    <div class="btn-group btn-group-toggle" data-toggle="buttons">
      <label class="btn btn-study-cave active" (click)="showGlobalRanking()">
        <input type="radio" name="options" id="option1" autocomplete="off" checked><i class="fas fa-globe"></i> Ranking
        ogólny
      </label>
      <label class="btn btn-study-cave" (click)="showOnlyTestsRanking()">
        <input type="radio" name="options" id="option2" autocomplete="off"><i class="fas fa-pencil-ruler"></i> Ranking testów
      </label>
    </div>
    <br />
    <div *ngIf="group">
      <button class="button float-right mr-1" (click)="downloadCSVResults()">Eksportuj ranking do pliku CSV</button>
      <div style="clear: both;"></div>
    </div>
    <br />
    <ag-grid-angular style="width: 100%; height: 475px;" class="ag-theme-dark" [rowData]="data" [columnDefs]="columnDefs"
      [enableSorting]="true" [enableFilter]="true" (gridReady)="onGridReady($event)" [gridOptions]="gridOptions"
      [pagination]="true" [paginationAutoPageSize]="true" [localeText]="localeText" (gridColumnsChanged)="onGridColumnsChanged($event)"
      (gridSizeChanged)="onGridSizeChanged($event)">
    </ag-grid-angular>

    <div #chartContainer class="chart-container">

    </div>
  </div>
</div>
