<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">
      <label for="class-select">Choose a class:</label>
      <select id="class-select" [(ngModel)]="currentClass" name="classes">
        <option *ngFor="let ompclass of classes" [ngValue]="ompclass">{{ompclass.classCode}}</option>
      </select>
    </form>
  </div>
  <div *ngIf="!isTemplate" class="row">
    <form #templateForm="ngForm">
      <label for="template-select">Load a template:</label>
      <select id="template-select" [(ngModel)]="currentTemplate" (change)="setTemplate()" name="templates">
        <option *ngFor="let template of templates" [ngValue]="template">{{template.paper.name}}</option>
      </select>
    </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 *ngIf="!isTemplate">
    <button class="btn-primary" (click)="createPaper()">Create One-minute Paper</button>
  </div>
  <div *ngIf="isTemplate">
    <button class="btn-primary" (click)="createTemplate()">Create Template</button>
  </div>
  <div>
    <button class="btn-danger">Cancel</button>
  </div>
</div>