@if (candidates.length > 0) {
  <div class="selectors">
    <nb-select
      class="select"
      [placeholder]="'CANDIDATES_PAGE.STATISTIC.SELECT_INTERVIEW' | translate"
      (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>
    <div class="select-interviewer">
      <ga-candidate-interviewer-select
        [reset]="isResetSelect"
        [disabled]="currentInterview ? false : true"
        [isAllMembers]="true"
        [disabledIds]="disabledIds"
        [interviewers]="currentEmployee"
        [placeholder]="'FORM.PLACEHOLDERS.ADD_REMOVE_INTERVIEWER' | translate"
        (selectedChange)="onMembersSelected($event)"
      ></ga-candidate-interviewer-select>
    </div>
  </div>
}
@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_INTERVIEWER' | translate }}
      </span>
    }
  </div>
}

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