<div class="container">
    <div class="pg-title" *ngIf="!UpdateBtn">Create Job Requirement</div>
    <div class="pg-title" *ngIf="UpdateBtn">Edit Job Requirement</div>
    <br />
    <label for="jobrequirement" *ngIf="errMsg" class="modal-err-msg">{{errMsg}}</label>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 jobrequirement_newform">
            <mat-select multiple placeholder="Skill Master" (change)="onSkillMaster($event, skillTrackName.value)" [(ngModel)]="newjrFormdet.skills" #skillTrackName ngDefaultControl>
                <mat-option *ngFor="let sdata of skilltrackResponse" [value]="sdata.skillMaster.skillTrackMstrId" name="first">
                    <span>{{ sdata.skillMaster.skillTrackName }} </span>
                </mat-option>
            </mat-select>
        </div>
        <!-- <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_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]="skillArrJr.indexOf(ck.skillTrackDtlsId) > -1" value="ck.skillTrackDtlsId" type="checkbox" (change)="updateCheckedOptions(ck.skillTrackDtlsId, $event)" #skills/>{{ck.skillTrackDtlsName}}
                        </div>
                    </div>
                </div>
            </div>
        </div> [disabled]="editDisabled"-->
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_newform">
            <mat-select multiple placeholder="Coach" ngDefaultControl [(ngModel)]="newjrFormdet.coaches">
                <mat-option *ngFor="let coa of coachList" [value]="coa.userInfoMstrId" name="first">
                    <span>{{ coa.fullName }} </span>
                </mat-option>
            </mat-select>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_newform">
            <mat-form-field class="">
                <input matInput placeholder="Requirement Name" [(ngModel)]="newjrFormdet.jobTitle">
            </mat-form-field>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 jobrequirement_newform">
            <mat-form-field class="">
                <input matInput placeholder="Job Requirement Description" [(ngModel)]="newjrFormdet.description">
            </mat-form-field>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_newform">
            <mat-select placeholder="Primary Challenge" ngDefaultControl [(ngModel)]="newjrFormdet.assesment">
                <mat-option *ngFor="let chal of primChallange" [value]="chal.assessmentId" name="first">
                    <span class="pull-left">{{ chal.assessmentId }}  - <span class="metl-desc"> {{ chal.assessmentName }} </span></span>
                </mat-option>
            </mat-select>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_newform">
            <mat-select placeholder="Coding Challange Usecase" ngDefaultControl [(ngModel)]="newjrFormdet.codingChallengeUseCaseId">
                <mat-option *ngFor="let cds of codingCUC" [value]="cds.id" name="first">
                    <span class="pull-left"><span class="metl-desc"> {{ cds.usecaseTitle }} </span></span>
                </mat-option>
            </mat-select>
        </div>
    </div>
    <div class="row">
        <!-- <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_newform">
            <mat-select placeholder="Whiteboard Scenario" ngDefaultControl [(ngModel)]="newjrFormdet.whiteboardScenariosUseCaseId" [disabled]="editDisabled" *ngIf="whiteBoardScn?.length > 0; else noWbsc">
                <mat-option *ngFor="let wbsc of whiteBoardScn" [value]="wbsc.id" name="first">
                    <span class="pull-left">{{ wbsc.id }} - <span class="metl-desc"> {{ wbsc.usecaseTitle }} </span></span>
                </mat-option>
            </mat-select>
            <ng-template #noWbsc>
                <mat-select placeholder="Whiteboard Scenario" ngDefaultControl [disabled]="editDisabled">
                    <mat-option name="first">
                        <span class="pull-left"><span class="metl-desc"> No Data Available </span></span>
                    </mat-option>
                </mat-select>
            </ng-template>
        </div> -->
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_newform">
            <mat-select placeholder="Sandbox" ngDefaultControl [(ngModel)]="newjrFormdet.sandboxId">
                <mat-option *ngFor="let snd of sandboxes" [value]="snd.id" name="first">
                    <span class="pull-left"><span class="metl-desc"> {{ snd.pgSkillTrackMstr.skillTrackName }} </span></span>
                </mat-option>
            </mat-select>
        </div>
        <!-- </div>
    <div class="row"> -->
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 jobrequirement_newform">
            <mat-select placeholder="Accounts" ngDefaultControl [(ngModel)]="newjrFormdet.accountId">
                <mat-option *ngFor="let acc of accountDets" [value]="acc.accountMstrId" name="first">
                    <span class="pull-left"><span class="metl-desc"> {{ acc.accountName }} </span></span>
                </mat-option>
            </mat-select>
            <ng-template #noAccounts>
                <mat-select placeholder="Accounts" ngDefaultControl [disabled]="editDisabled">
                    <mat-option name="first">
                        <span class="pull-left"><span class="metl-desc"> No Data Available </span></span>
                    </mat-option>
                </mat-select>
            </ng-template>
        </div>
    </div>
    <div class="row">
        <div class="pull-right">
            <button class="btn btn-default btn-play-cancel " (click)="cancelForm()">Cancel</button>
            <button *ngIf="UpdateBtn" class="btn btn-warning btn-play-update" (click)="editExistingJR()">Update</button>
            <button *ngIf="!UpdateBtn" class="btn btn-primary btn-play-create" (click)="createNewJR()">Create</button>
        </div>
    </div>
    <!-- <div class="row">
        <pre style="text-align: left"> {{ newjrFormdet | json }}</pre>
    </div> -->
</div>