<form (ngSubmit)="submitContent()">
  <mat-form-field class="input-block">
    <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject">
  </mat-form-field>
  <mat-form-field class="input-block">
    <textarea matInput #body [(ngModel)]="content.body" placeholder="Body" name="body"></textarea>
  </mat-form-field>
  <mat-divider></mat-divider>

  <mat-table #table [dataSource]="correctAnswers">

    <ng-container matColumnDef="label">
      <mat-header-cell *matHeaderCellDef>Answer</mat-header-cell>
      <mat-cell *matCellDef="let answer">
        <!-- ToDo: Check ngModel -->
        <mat-checkbox color="primary" [(ngModel)]="answer.correct" name="answer">{{ answer.answerOption.label }} is {{ answer.correct }}</mat-checkbox>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="points">
      <mat-header-cell *matHeaderCellDef>Points</mat-header-cell>
      <mat-cell *matCellDef="let answer">{{ answer.answerOption.points }}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

  <mat-divider></mat-divider>

  <div fxLayout="row" fxLayoutGap="15px">
    <div fxLayout="column" fxLayoutAlign="center">
      <mat-checkbox #answerIsCorrect color="primary">Is correct</mat-checkbox>
    </div>
    <mat-form-field class="input-block">
      <input matInput #answerLabel placeholder="Answer" name="answer">
    </mat-form-field>
    <mat-form-field class="input-block">
      <input matInput #answerPoints placeholder="Points" name="points">
    </mat-form-field>
    <div fxLayout="column" fxLayoutAlign="center">
      <button mat-button type="button"
              (click)="addAnswer(answerIsCorrect.value, answerLabel.value, answerPoints.value)">
        Add Answer
      </button>
    </div>
  </div>

  <button mat-raised-button type="submit" color="primary">Submit</button>
</form>