<div class="container">
  <div class="row">
    <div [formGroup]="form">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <div class="row-fluid">
              <div class="col-md-9 content-left">
                <label class="review-label" [attr.for]="question.key">{{question.label}}</label>
                <div [ngSwitch]="question.controlType">
                  <div class="col-lg-12">
                    <span *ngSwitchCase="'textbox'">
                      <textarea class="form-control rounded-0" [formControlName]="question.key" [id]="question.key" rows="2">
                      </textarea>
                      <br>
                    </span>
                  </div>
                  <span *ngSwitchCase="'checkbox'">
                    <div class="col-lg-12" >
                      <div *ngFor="let opt of question.options" style="width: 50%">
                          <mat-checkbox [formControlName]="question.key" (change)="onChange(question.key, opt.value, $event.checked)">
                              <label class="review-label">{{opt.value}}</label>
                            </mat-checkbox>
                      </div>
                    </div>
                  </span>
                  <span *ngSwitchCase="'radioButton'">
                    <div class="col-lg-12">
                      <mat-radio-group [formControlName]="question.key" class="checkbox-style">
                        <div *ngFor="let opt of question.options">
                          <mat-radio-button [value]="opt.value">
                            <label class="review-label-radiobutton">{{opt.value}}</label>
                          </mat-radio-button>
                        </div>
                      </mat-radio-group>
                    </div>
                  </span>
                </div>
                <div class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>

              </div>
              <div class="col-md-3 content-right">
                <div class="center-block">
                  <div *ngIf="getRatingType(question.feedback); else notStarRating">
                    <star-rating-comp [starType]="'svg'" [formControlName]="question.feedback"></star-rating-comp>
                  </div>

                  <ng-template #notStarRating>
                    <mat-button-toggle-group [formControlName]="question.feedback" value=5>
                      <mat-button-toggle value=5>Yes</mat-button-toggle>
                      <mat-button-toggle value=0>No</mat-button-toggle>
                    </mat-button-toggle-group>
                  </ng-template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
