<app-navbar></app-navbar>
<div class="container">
  <div>
    <h4>{{currentPaper.name}}</h4>
    <h4>Write a response about {{currentPaper.topic}} for {{currentPaper.classCode}}</h4>
  </div>
  <form #submissionForm>
    <div>
      <div *ngFor="let pair of questionAnswerPairs; let i = index" [attr.data-index]="i">
          <div class="row">
            <span>Question {{i+1}}:</span>
          </div>
          <div class="row">
            <label for="{{i}}">{{pair.question.questionText}}</label>
            <textarea id="{{i}}" class="form-control" type="text" rows="3" name="{{i}}"
                      [(ngModel)]="pair.answer.answerText" placeholder="Start typing your response here.."></textarea>
          </div>
      </div>
      <!-- Buttons  -->
      <div class="row">
        <button class="btn btn-primary" type="submit" (click)="submit()"> Submit Response </button>
        <button class="btn btn-secondary" type="submit" (click)="save()"> Save As Draft </button>
      </div>
    </div>
  </form>
</div>