<div class="container">
  <div class="row">
    <form [formGroup]="infoForm">
      <label for="name">Enter a name for this one-minute paper:</label>
      <input id="name" placeholder="Enter one-minute paper name...">
      <label for="topic">Enter a topic for this one-minute paper:</label>
      <input id="topic" placeholder="Enter one-minute paper topic...">
      <label for="class-select">Choose a class:</label>
      <select id="class-select">
      </select>
    </form>
  </div>
  <div *ngIf="!isTemplate" class="row">
    <form [formGroup]="templateForm">
      <label for="template-select">Load a template:</label>
      <select id="template-select">
      </select>
    </form>
  </div>
  <div class="row">
    <form [formGroup]="checkBoxForm">
      <label for="anonymous-box">Would you like responses to be anonymised?:</label>
      <input id="anonymous-box" type="checkbox" [value]="isAnonymous" (change)="flipIsAnonymous()">
    </form>
  </div>
  <div class="row">
    <form [formGroup]="questionForm">
      <div *ngFor="let question of questions; let i = index;" [attr.data-index]="i">
        <div class="row">
          <span>Question {{i+1}}:</span>
        </div>
        <div class="row">
          <label for="{{i}}">Question {{i}}</label>
          <textarea id="{{i}}" [formControlName]="i" class="form-control" type="text" rows="3" placeholder="Start typing your question here.."></textarea>
        </div>
      </div>
    </form>
    <button class="btn-primary" (click)="addQuestion()">Add Question</button>
    <button class="btn-danger" (click)="removeQuestion()">Remove Question</button>
  </div>
  <div *ngIf="!isTemplate">
    <button class="btn-primary" type="submit" (click)="createPaper()">Create One-minute Paper</button>
  </div>
  <div *ngIf="isTemplate">
    <button class="btn-primary" type="submit" (click)="createTemplate()">Create Template</button>
  </div>
</div>