<div>
    <h2 class="pg-title"> {{formTitle}}</h2>

    <div class="container padding-bottom-1">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 usecase_newform">
                <mat-select placeholder="Skill Master" (change)="onSkillMaster($event, skillTrackName.value)" [(ngModel)]="newucFormdet.skillTrackMstrId" #skillTrackName ngDefaultControl>
                    <!-- [(value)]="skillmaster_selected" -->
                    <mat-option *ngFor="let sdata of skilltrackResponse" [value]="sdata.skillMaster.skillTrackMstrId" name="first">
                        <span class="pull-left">{{ sdata.skillMaster.skillTrackName }} </span>
                        <div class="sub-titleOf">
                            <span>{{sdata.skillTrackDtlsName.skillTrackDtlsName}} </span></div>
                    </mat-option>
                </mat-select>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 usecase_newform" style="visibility:visible">
                <div *ngIf="selectedSkillValues !== undefined">
                    <div *ngFor="let sdata of skilltrackResponse">
                        <div *ngIf="selectedSkillValues == sdata.skillMaster.skillTrackMstrId">
                            <div *ngFor="let ck of sdata.skillTrackDtlsName" class="cb_options">
                                <input [checked]="skillArr.indexOf(ck.skillTrackDtlsId) > -1" type="checkbox" value="ck.skillTrackDtlsId" (change)="updateCheckedOptions(ck.skillTrackDtlsId, $event)" />{{ck.skillTrackDtlsName}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 usecase_newform">
                <mat-select placeholder="Usecase Type" [(ngModel)]="newucFormdet.eventMstrId">
                    <!--  [(value)]="usecasetypeSelected" -->
                    <mat-option *ngFor="let use of usecaseType" [value]="use.id">
                        <span class="pull-left">{{ use.type}}</span>
                    </mat-option>
                </mat-select>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 usecase_newform">
                <mat-select placeholder="Experience Level" [(ngModel)]="newucFormdet.experienceLevelId">
                    <!-- [(value)]="experienceSelected" -->
                    <mat-option *ngFor="let exp of expLevel" [value]="exp.experienceLevelId">
                        <span class="pull-left">{{ exp.experienceLevel }}</span>
                    </mat-option>
                </mat-select>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 usecase_newform">
                <mat-form-field class="">
                    <input matInput placeholder="Usecase Title" [(ngModel)]="newucFormdet.useCaseTitle">
                </mat-form-field>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 usecase_newform">
                <mat-form-field class="">
                    <input matInput placeholder="Passmark(%)" [(ngModel)]="newucFormdet.passMarks" type="number" max="100">
                </mat-form-field>
            </div>
        </div>
        <div class="container">
            <quill-editor [(ngModel)]="newucFormdet.usecaseDesp" (blur)="onEditorBlured($event)" (focus)="onEditorFocused($event)" (ready)="onEditorCreated($event)" (change)="onContentChanged($event)"></quill-editor>
        </div>
        <div class="row">

        </div>
        <!-- <div class="row">
            <input type="checkbox" [(ngModel)]="theCheckbox" data-md-icheck (change)="toggleVisibility($event)" ngDefaultControl />
            <label for="checkbox-sandbox">Sandbox</label>
            <div *ngIf="marked">
                <div [(ngModel)]="newucFormdet.sandBoxId"> Available sandbox content to be added </div>
            </div>
        </div> -->
        <div class="evtitle">
            Add Evaluation Criteria
        </div>
        <div class="evsubtitle">
            Please select the type of rating you want
        </div>
        <div class="forRadioTxt">
            <input type="radio" name="rating" [value]="true" [(ngModel)]="newucFormdet.rating"> Rating
            <input type="radio" name="rating" [value]="false" class="m_l_5" [(ngModel)]="newucFormdet.rating"> Yes/No
        </div>
        <br />

        <div class="evsubtitle">
            Please select the type of questionnaire you want
        </div>
        <br />
        <div class="container">
            <div class="" *ngIf="qnrFormData">
                <form [formGroup]="singleSelectForm" *ngIf="singleSelectQnr">
                    <div formArrayName="singleSelectQuestions">
                        <div *ngFor="let comp of singleSelectForm.get('singleSelectQuestions').controls; let i=index">
                            <div class="panel panel-primary">
                                <div class="panel-heading">Single Choice <span class="pull-right"><img src="{{imgPath + 'delete_icon.png'}}"  (click)="deleteSingleChoiceQnr(i)" class="rounded-img"></span></div>
                                <div class="panel-body">
                                    <div [formGroupName]="i">
                                        <input formControlName="question" placeholder="Type Your Question" />
                                        <div *ngIf="comp.controls['question'].errors?.required && comp.controls['question'].touched" class="help-block">Single Select Question cannot be empty</div>
                                        <div formArrayName="answers">
                                            <div *ngFor="let project of comp.get('answers').controls; let j=index">
                                                <div [formGroupName]="j">
                                                    <label class="emptyLabel">&nbsp; &nbsp;</label>
                                                    <input formControlName="option" placeholder="Type Option {{j+1}}" class="ansinput" />
                                                    <span><img src="{{imgPath + 'delete_icon.png'}}" class="rounded-img" (click)="deleteSingleChoiceAns(comp.controls.answers, j)"></span>
                                                    <div *ngIf="project.controls['option'].errors?.required && project.controls['option'].touched" class="help-block">Single Select Answer Option cannot be empty</div>
                                                    <input formControlName="optionId" style="display:none" *ngIf="project.controls[optionId]">
                                                    <!-- <span *ngIf="!singleSelectForm.get('option').valid && singleSelectForm.get('option').touched" class="help-block">Option cannot be empty</span> -->
                                                </div>
                                            </div>
                                            <span class="addAnsOpt" title="Add Answer Option"><img src="{{imgPath + 'add_button2.png'}}" (click)="addNewSingleChoiceAns(comp.controls.answers)" /></span>
                                        </div>
                                        <input formControlName="rating" style="display:none" [(ngModel)]="newucFormdet.rating">
                                        <input formControlName="questionId" style="display:none" *ngIf="comp.controls['questionId']">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <input formControlName="selectOption" style="display: none"> -->
                    </div>
                    <!-- <span formControlName="selectOption">&nbsp;</span> -->
                </form>
                <!-- <pre>{{singleSelectForm.value | json}}</pre> -->
                <form [formGroup]="multiSelectForm" *ngIf="multipleSelectQnr">
                    <div formArrayName="multipleSelectQuestions">
                        <div *ngFor="let comp of multiSelectForm.get('multipleSelectQuestions').controls; let i=index">
                            <div class="panel panel-warning">
                                <div class="panel-heading">Multiple Choice <span class="pull-right"><img src="{{imgPath + 'delete_icon.png'}}"  (click)="deleteMultipleChoiceQnr(i)" class="rounded-img"></span></div>
                                <div class="panel-body">
                                    <div [formGroupName]="i">
                                        <input formControlName="question" placeholder="Type Your Question" /><span></span>
                                        <div *ngIf="comp.controls['question'].errors?.required && comp.controls['question'].touched" class="help-block">Multi Select Question cannot be empty</div>
                                        <div formArrayName="answers">
                                            <div *ngFor="let project of comp.get('answers').controls; let j=index">
                                                <div [formGroupName]="j">
                                                    <label class="emptyLabel">&nbsp; &nbsp;</label>
                                                    <input formControlName="option" placeholder="Type Option {{j+1}}" class="ansinput" />
                                                    <span><img src="{{imgPath + 'delete_icon.png'}}" class="rounded-img" (click)="deleteMultipleChoiceAns(comp.controls.answers, j)"></span>
                                                    <div *ngIf="project.controls['option'].errors?.required && project.controls['option'].touched" class="help-block">Multi Select Answer Option cannot be empty</div>
                                                    <input formControlName="optionId" style="display:none" *ngIf="project.controls[optionId]">
                                                </div>
                                            </div>
                                            <span class="addAnsOpt" title="Add Answer Option"><img src="{{imgPath + 'add_button2.png'}}" (click)="addNewMultipleChoiceAns(comp.controls.answers)" /></span>
                                        </div>
                                        <input formControlName="rating" style="display:none" [(ngModel)]="newucFormdet.rating">
                                        <input formControlName="questionId" style="display:none" *ngIf="comp.controls['questionId']">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <input formControlName="selectOption" style="display: none"> -->
                    </div>
                </form>
                <!-- <pre>{{multiSelectForm.value | json}}</pre> -->
                <form [formGroup]="customQnrForm" *ngIf="customQnrBlock">
                    <div formArrayName="customQuestions">
                        <div *ngFor="let cst of customQnrForm.get('customQuestions').controls; let i=index">
                            <div class="panel panel-danger">
                                <div class="panel-heading">Custom Question<span class="pull-right"><img src="{{imgPath + 'delete_icon.png'}}"  (click)="deleteCustomQnr(i)" class="rounded-img"></span></div>
                                <div class="panel-body">
                                    <div [formGroupName]="i">
                                        <input formControlName="question" placeholder="Type Your Question" />
                                        <div *ngIf="cst.controls['question'].errors?.required && cst.controls['question'].touched" class="help-block">Custom Question cannot be empty</div>
                                        <input formControlName="rating" style="display:none" [(ngModel)]="newucFormdet.rating">
                                        <input formControlName="questionId" style="display:none" *ngIf="cst.controls['questionId']">
                                        <div formArrayName="answers" style="display:none">
                                            <div *ngFor="let project of cst.get('answers').controls; let j=index">
                                                <div [formGroupName]="j">
                                                    <label class="emptyLabel">&nbsp; &nbsp;</label>
                                                    <input formControlName="option" placeholder="Type Option {{j+1}}" class="ansinput" />
                                                    <!-- <div *ngIf="project.controls['option'].errors?.required && project.controls['option'].touched" class="help-block">Option cannot be empty</div> -->
                                                    <input formControlName="optionId" style="display:none" *ngIf="project.controls[optionId]">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- <pre>{{customQnrForm.value | json}}</pre> -->
            </div>
        </div>
        <div class="row">
            <div class="pull-left" *ngIf="!qnrBtns">
                <span class="addBgd"><img src="{{imgPath + 'add_button2.png'}}" (click)="addMoreQnr()"/></span>
            </div>
            <div class="pull-left" *ngIf="qnrBtns">
                <span *ngIf="closeAddMore" class="addBgd"><img src="{{imgPath + 'add_button2.png'}}" class="makeClose" (click)="hideAddBtns()" /></span>
                <span class="evBtn" (click)="showSingleChoiceQnr()">Single Choice</span>
                <!-- showSingleChoiceQnr -->
                <span class="evBtn" (click)="showMultipleChoiceQnr()">Multiple Choice</span>
                <span class="evBtn" (click)="showCustomQnr()">Custom Question</span>
            </div>

        </div>
        <div class="row">
            <div class="pull-right">
                <button class="btn btn-default" (click)="cancelForm()">Cancel</button>
                <button *ngIf="!isEdit" class="btn btn-primary" (click)="submitTheForm()">Create</button>
                <button *ngIf="isEdit" class="btn btn-warning" (click)="updateUsecase()">Update</button>
                <!--  [disabled]="!singleSelectForm.valid || !multiSelectForm.valid || !customQnrForm.valid" -->
            </div>
        </div>
        <div class="row">
            <label for="assessment" *ngIf="errMsg" class="modal-err-msg">{{errMsg}}</label>
        </div>
    </div>
</div>