<app-lecturer-navbar></app-lecturer-navbar>
<div id="title-row" class="row">
  <div id="details-row" class="col-md">
    <div *ngIf="!isTemplate">
      <h4>Create a new one-minute paper</h4>
    </div>
    <div *ngIf="isTemplate">
      <h4>Create a new template</h4>
    </div>
    <form #infoForm="ngForm">
      <div class="create-form">
        <label class="col-form-label" for="name">Enter a name for this one-minute paper:</label>
        <input class="form-control" type="text" id="name" [(ngModel)]="paperName" name="nameBox" #nameBox="ngModel" required placeholder="Enter a name...">
        <div [hidden]="(nameBox.valid || nameBox.pristine) && !nameInvalid" class="is-invalid">
          <p style="color: red">*Name required</p>
        </div>
      </div>
      <div class="create-form">
        <label class="col-form-label" for="topic">Enter a topic for this one-minute paper:</label>
        <input class="form-control" id="topic" required [(ngModel)]="paperTopic" name="topicBox" #topicBox="ngModel" placeholder="Enter a topic...">
        <div [hidden]="(topicBox.valid || topicBox.pristine) && !topicInvalid" class="is-invalid">
          <p style="color: red">*Topic required</p>
        </div>
      </div>
      <div class="create-form">
        <form #anonymousForm="ngForm" style="margin-top: 1%">
          <label class="form-check-label" for="anonymous-box">Would you like to anonymise responses?:  </label>
          <input style="width: 10%;" class="form-check-inline form-control" id="anonymous-box" type="checkbox" [(ngModel)]="isAnonymous" name="templateCheckbox" (click)="flipIsAnonymous()">
        </form>
      </div>
    </form>
    <form *ngIf="!isTemplate" #templateForm="ngForm" style="margin-top: 1%">
      <div class="create-form">
        <label class="col-form-label" for="class-select">Choose a class:</label>
        <select class="form-control" id="class-select" [(ngModel)]="currentClass" name="classes">
          <option *ngFor="let ompclass of classes" [ngValue]="ompclass">{{ompclass.classCode}}</option>
        </select>
      </div>
      <div class="create-form">
       <label class="col-form-label" for="template-select">Select a template:</label>
        <select class="form-control" id="template-select" [(ngModel)]="currentTemplate" name="templates">
          <option *ngFor="let template of templates" [ngValue]="template">{{template.paper.name}}</option>
        </select>
        <div style="margin-top: 2%">
          <button class="btn btn-sm btn-warning" (click)="setTemplate()">Load Template</button>
        </div>
      </div>
    </form>
    <div id="button-row" style="margin-top: 10%">
      <div id="q-error-row">
        <div *ngIf="isSubmitted" class="is-invalid">
          <p *ngIf="noQuestions" style="color: red">*At least one question is required</p>
          <p *ngIf="invalidQuestions" style="color: red">*Text is required for all questions</p>
        </div>
      </div>
      <div id="paper-button" class="row" *ngIf="!isTemplate" style="margin-top: 1%">
        <button class="btn btn-primary" type="submit" (click)="createPaper()">Create One-minute Paper</button>
        <button class="btn btn-warning" style="margin-left: 1%" (click)="reset()">Reset Form</button>
      </div>
      <div id="template-button" class="row" *ngIf="isTemplate" style="margin-top: 1%">
        <button class="btn btn-primary" type="submit" (click)="createTemplate()">Create Template</button>
        <button class="btn btn-warning" style="margin-left: 1%" (click)="reset()">Reset Form</button>
      </div>
      <div id="cancel-button" class="row">
        <button class="btn btn-danger" (click)="cancel()" style="margin-top: 1%">Cancel</button>
      </div>
    </div>
  </div>

  <div id="question-col" class="col-md">
    <div id="add-row">
      <button class="btn btn-primary row" (click)="addQuestion()">Add Question</button>
    </div>
    <div id="question-scrollbox" class="pre-scrollable" style="margin-top: 1%">
      <form #questionForm="ngForm">
        <div *ngFor="let question of questions; let i = index;" [attr.data-index]="i">
          <div style="width: 80%">
            <div class="row">
              <div class="col-9">
                <label class="col-form-label form-text" for="{{i}}">Question {{i+1}}</label>
              </div>
              <div class="col-3">
                <a class="btn btn-sm text-danger form-text" (click)="removeQuestion(i)">Remove Question {{i+1}}</a>
              </div>
            </div>
            <textarea class="form-control" id="{{i}}" type="text" rows="3" [(ngModel)]="question.questionText" name="{{i+1}}" placeholder="Enter your text..."></textarea>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>