@if (candidates.length > 0) {
  <nb-select
    [placeholder]="'CANDIDATES_PAGE.STATISTIC.SELECT_INTERVIEW' | translate"
    class="select"
    (selectedChange)="onInterviewSelected($event)"
    >
    @for (candidate of candidates; track candidate) {
      <nb-option-group [title]="candidate.user?.name">
        @for (interview of candidate.interview; track interview) {
          <nb-option [value]="interview">
            {{ interview.title }}
          </nb-option>
        }
      </nb-option-group>
    }
  </nb-select>
}

@if (rating?.length > 0) {
  <canvas style="height: 400px; width: 100%" baseChart [type]="'bar'" [data]="data" [options]="options"></canvas>
}

@if (rating?.length === 0) {
  <div class="no-data">
    <nb-icon icon="info-outline" class="no-data-icon"></nb-icon>
    <span class="no-data-text">{{ 'CANDIDATES_PAGE.STATISTIC.NO_DATA' | translate }}</span>
    @if (candidates.length > 0) {
      <span class="no-data-text">
        {{ 'CANDIDATES_PAGE.STATISTIC.SELECT_INTERVIEW' | translate }}
      </span>
    }
  </div>
}