<div *ngIf="countdown && countdown.isRunning"
     id="countdown-header"
     class="overflow-hidden mb-3 d-flex justify-content-between">
  <div>
    <i class="fas fa-users"></i>
    <span>{{attendeeService.attendees.length}}</span>
  </div>
  <div>
    <span>{{countdown.remainingTime}}</span>
    <i class="fas fa-hourglass"></i>
  </div>
</div>

<div class="overflow-auto">
  <div class="my-3 btn-group">
    <button *ngIf="showStartQuizButton()"
            (click)="startQuiz()"
            class="btn btn-default pointer"
            [class.w-100]="currentQuizService.getVisibleQuestions().length">
      <span *ngIf="currentQuizService.quiz.sessionConfig.readingConfirmationEnabled && currentQuizService.readingConfirmationRequested">
        {{'component.liveResults.start_round' | translate}}
      </span>
      <span *ngIf="currentQuizService.quiz.sessionConfig.readingConfirmationEnabled && !currentQuizService.readingConfirmationRequested">
        {{'component.liveResults.show_question' | translate}}
      </span>
      <span *ngIf="!currentQuizService.quiz.sessionConfig.readingConfirmationEnabled">
        {{'component.liveResults.start_round' | translate}}
      </span>
      <i class="fas fa-paper-plane"></i>
    </button>
    <button *ngIf="showStopCountdownButton()"
            (click)="stopQuiz()"
            class="btn btn-default pointer"
            [class.w-100]="!currentQuizService.getVisibleQuestions().length">
      <span [innerHTML]="'component.liveResults.abort_countdown' | translate"></span>
      <i class="fas fa-ban"></i>
    </button>
    <button *ngIf="showStopQuizButton()"
            (click)="stopQuiz()"
            class="btn btn-default pointer"
            [class.w-100]="!currentQuizService.getVisibleQuestions().length">
      <span [innerHTML]="'component.liveResults.abort_question' | translate"></span>
      <i class="fas fa-ban"></i>
    </button>
    <button *ngFor="let question of currentQuizService.getVisibleQuestions(); let i = index"
            class="btn btn-default pointer"
            [class.disabled]="i === selectedQuestionIndex"
            [disabled]="i === selectedQuestionIndex"
            (click)="modifyVisibleQuestion(i)">
      <span>{{'component.liveResults.question_number' | translate}} {{i + 1}}</span>
    </button>
  </div>
</div>

<div class="question">
  <div *ngIf="currentQuizService.quiz.questionList.length">
    <h2 class="question-title">{{'component.liveResults.question_number' | translate}}&nbsp;{{selectedQuestionIndex + 1}} /
                               {{currentQuizService.quiz.questionList.length}}</h2>
  </div>
  <div class="btn-group w-100">
    <button *ngIf="showLeaderBoardButton(selectedQuestionIndex)"
            [routerLink]="['/quiz', 'flow', 'leaderboard', selectedQuestionIndex]"
            type="button"
            class="btn btn-info w-100 pointer">
      <i class="fas fa-trophy"
         aria-hidden="true"></i>
      <span>{{'component.liveResults.ranking' | translate}}</span>
    </button>
    <button [routerLink]="['/quiz', 'flow', 'results', selectedQuestionIndex]"
            type="button"
            class="btn btn-info w-100 pointer">
      <i class="fas fa-question"
         aria-hidden="true"></i>
      <span>{{'component.liveResults.question' | translate}}</span>
    </button>
  </div>
  <app-reading-confirmation *ngIf="showReadingConfirmation(selectedQuestionIndex)"
                            [data]="getReadingConfirmationData(selectedQuestionIndex)"></app-reading-confirmation>
  <app-confidence-rate *ngIf="showConfidenceRate(selectedQuestionIndex)"
                       [data]="getConfidenceData(selectedQuestionIndex)"></app-confidence-rate>
  <app-progress-bar *ngIf="showResponseProgress()"
                    [data]="answers"
                    [hideProgressbarCssStyle]="hideProgressbarCssStyle()"
                    [questionIndex]="selectedQuestionIndex"
                    [question]="currentQuizService.quiz.questionList[selectedQuestionIndex]"></app-progress-bar>
</div>

<div *ngIf="currentQuizService.isOwner">
  <app-audio-player *ngIf="countdown?.isRunning && countdown?.remainingTime && currentQuizService.quiz.sessionConfig?.music.enabled.countdownRunning"
                    [original_volume]="currentQuizService.quiz.sessionConfig.music.volumeConfig.useGlobalVolume ? currentQuizService.quiz.sessionConfig.music.volumeConfig.global : currentQuizService.quiz.sessionConfig.music.volumeConfig.countdownRunning"
                    [autostart]="true"
                    [target]="'countdownRunning'"
                    [src]="currentQuizService.quiz.sessionConfig.music.titleConfig.countdownRunning"></app-audio-player>

  <app-audio-player
    *ngIf="!countdown?.isRunning && !countdown?.remainingTime && !currentQuizService.readingConfirmationRequested && currentQuizService.quiz.sessionConfig?.music.enabled.countdownEnd"
    [original_volume]="currentQuizService.quiz.sessionConfig.music.volumeConfig.useGlobalVolume ? currentQuizService.quiz.sessionConfig.music.volumeConfig.global : currentQuizService.quiz.sessionConfig.music.volumeConfig.countdownEnd"
    [autostart]="true"
    [loop]="false"
    [target]="'countdownEnd'"
    [src]="currentQuizService.quiz.sessionConfig.music.titleConfig.countdownEnd"></app-audio-player>

  <app-gamification-animation *ngIf="countdown && countdown.isRunning && countdown.remainingTime >= 0"
                              [countdownValue]="countdown.remainingTime"></app-gamification-animation>
</div>

