<h2>{{title}}</h2>
<div class="question-edit">
   <form [formGroup]="form" (ngSubmit)="onSubmit()">

      <div class="form-group"
           [ngClass]="{ 'has-error has-feedback' : hasError('Text') }">
         <label for="text">Treść pytania:</label>
         <br />
         <textarea id="text"
                   formControlName="Text" required
                   placeholder="Wpisz odpowiednią treść..."
                   class="form-control"></textarea>
         <span *ngIf="hasError('Text')"
               class="glyphicon glyphicon-remove form-control-feedback"
               aria-hidden="true"></span>
         <div *ngIf="hasError('Text')"
              class="help-block">
            To pole jest wymagane — wpisz poprawny tekst.
         </div>
      </div>

      <div class="form-group commands">
         <button *ngIf="editMode" type="submit"
                 [disabled]="form.invalid"
                 class="btn btn-success">
            Zapisz zmiany
         </button>
         <button *ngIf="!editMode" type="submit"
                 [disabled]="form.invalid"
                 class="btn btn-success">
            Utwórz pytanie!
         </button>
         <button type="submit"
                 (click)="onBack()"
                 class="btn btn-default">
            Anuluj
         </button>
      </div>

      <answer-list *ngIf="editMode" [question]="question"></answer-list>
   </form>
</div>

<div class="panel panel-info"
     style="margin-top: 20px;">
   <div class="panel-heading">Debugowanie formularza</div>
   <div class="panel-body">
      <p><strong>Wartości formularza:</strong></p>
      <div class="help-block">
         {{ form.value | json }}
      </div>
      <p><strong>Status formularza:</strong></p>
      <div class="help-block">
         {{ form.status | json }}
      </div>
      <p><strong>Dziennik aktywności formularza:</strong></p>
      <div class="help-block">
         <span *ngIf="activityLog"
               [innerHTML]="activityLog"></span>
      </div>
   </div>
</div>