<div *ngIf="countdown && countdown.isRunning"
     id="countdown-header"
     class="overflow-hidden mb-3 d-flex">
  <div class="ml-auto">
    <span>{{countdownValue}}</span>
    <i class="fas fa-hourglass"></i>
  </div>
</div>

<div *ngIf="displayAnswerButtons()"
     id="answer-option-element-wrapper"
     class="d-flex justify-content-around align-items-center flex-wrap">
  <div *ngFor="let elem of answers; let i = index"
       [id]="i"
       class="answer-option-element d-flex justify-content-center align-items-center rounded m-2 pointer"
       [class.selected]="isSelected(i)"
       (click)="toggleSelectAnswer(i)"
       [style.flex-basis]="currentQuizService.currentQuestion().showOneAnswerPerRow ? '100%' : 'auto'">
    <p *ngIf="currentQuizService.currentQuestion().displayAnswerText"
       class="mb-0 markdown-answer"
       [innerHTML]="sanitizeHTML(elem)"></p>
    <p *ngIf="!currentQuizService.currentQuestion().displayAnswerText"
       class="mb-0"
       [innerHTML]="normalizeAnswerOptionIndex(i)"></p>
  </div>
</div>

<div *ngIf="displayRangedButtons()">
  <input type="number"
         [placeholder]="'component.voting.ranged_question.title' | translate"
         (input)="parseNumberInput($event)"
         (propertyChange)="parseNumberInput($event)"
         class="w-100"/>
</div>

<div *ngIf="displayFreetextInput()">
  <input type="text"
         [placeholder]="'component.voting.free_text_question.title' | translate"
         (input)="parseTextInput($event)"
         (propertyChange)="parseTextInput($event)"
         class="w-100"/>
</div>

<button *ngIf="showSendResponseButton()"
        class="btn btn-default w-100 mt-5 pointer"
        (click)="sendResponses()">
  <span>{{'component.voting.send' | translate}}</span>
  <i class="fas fa-paper-plane"></i>
</button>
