<app-lecturer-navbar></app-lecturer-navbar>
<div class="container">
  <div class="row">
    <form #infoForm="ngForm">
      <label for="name">Enter a name for this one-minute paper:</label>
      <input type="text" id="name" [(ngModel)]="name" name="name">
      <label for="topic">Enter a topic for this one-minute paper:</label>
      <input id="topic" [(ngModel)]="topic" name="topic">
    </form>
  </div>
  <div class="row">
    <form #anonymousForm="ngForm">
      <label for="anonymous-box">Would you like responses to be anonymised?:</label>
      <input id="anonymous-box" type="checkbox" [(ngModel)]="isAnonymous" name="templateCheckbox" (click)="flipIsAnonymous()">
    </form>
  </div>
  <div class="row">
    <form #questionForm="ngForm">
      <div *ngFor="let question of questions; let i = index;" [attr.data-index]="i">
        <div class="row">
          <label for="{{i}}">Question {{i+1}}</label>
          <textarea id="{{i}}" type="text" rows="3" [(ngModel)]="question.questionText" name="{{i+1}}"></textarea>
        </div>
        <button class="btn-danger" (click)="removeQuestion(i)">Remove Question</button>
      </div>
    </form>
    <button class="btn-primary" (click)="addQuestion()">Add Question</button>
  </div>
  <div>
    <button class="btn-primary" (click)="saveTemplate()">Save Template</button>
  </div>
  <div>
    <button class="btn-danger">Cancel</button>
  </div>
</div>