<div class="container">
    <div class="pg-title" *ngIf="!UpdateBtn">Create Assessment</div>
    <div class="pg-title" *ngIf="UpdateBtn">Edit Assessment</div>
    <br />
    <label for="assessment" *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 assesment_newform">
            <mat-select placeholder="Skill Master" (change)="onSkillMaster($event, skillTrackName.value)" [(ngModel)]="newcaFormdet.skillTrackMstrId" #skillTrackName ngDefaultControl>
                <mat-option *ngFor="let sdata of skilltrackResponse" [value]="sdata.skillMaster.skillTrackMstrId" name="first">
                    <span class="pull-left">{{ sdata.skillMaster.skillTrackName }} </span>
                </mat-option>
            </mat-select>
            <!-- <mat-select placeholder="State" multiple>
                    <mat-option *ngFor="let item of skillSet" [value]="item.skillTrackId">{{ item.skillTrackName }}</mat-option>
                </mat-select> -->
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 assesment_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]="skillArrCa.indexOf(ck.skillTrackDtlsId) > -1" value="ck.skillTrackDtlsId" type="checkbox" (change)="updateCheckedOptions(ck.skillTrackDtlsId, $event)" #skills/>{{ck.skillTrackDtlsName}}
                        </div>
                        <!-- <div *ngFor="let ck of sdata.skillTrackDtlsName" class="cb_options">
                                <span class='uu'>{{ck.skillTrackDtlsName}}</span>  [(ngModel)]="ck.checked"
                            </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 assesment_newform">
            <mat-select placeholder="Assesment ID" [(ngModel)]="newcaFormdet.assessmentId" [(value)]="newcaFormdet.assessmentId" ngDefaultControl>
                <!-- <ngx-mat-select-search placeholder="Search..."></ngx-mat-select-search> -->
                <mat-option *ngFor="let asmt of mettlAsmnt" [value]="asmt.id" name="first">
                    <span class="pull-left">{{ asmt.id }} <span class="metl-desc"> {{ asmt.name }} </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 assesment_newform">
            <mat-form-field class="">
                <input matInput placeholder="Assesment Name" [(ngModel)]="newcaFormdet.assessmentName">
            </mat-form-field>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 assesment_newform">
            <mat-form-field class="">
                <input matInput placeholder="Passmark(%)" [(ngModel)]="newcaFormdet.passMarks" type="number" max="100">
            </mat-form-field>
        </div>
    </div>
    <!-- <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 assesment_newform">
                <mat-form-field class="">
                    <input matInput placeholder="Directory ID" [(ngModel)]="newcaFormdet.directoryId">
                </mat-form-field>
            </div> -->

    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 assesment_newform">
            <mat-form-field class="">
                <input matInput placeholder="Description" [(ngModel)]="newcaFormdet.assessmentDesc">
            </mat-form-field>
        </div>
    </div>
    <div class="row" *ngIf="UpdateBtn">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 taker-div">
            <div class="taker-count">{{newcaFormdet.testTakersCount}}</div>
            <div>Number of test takers</div>
        </div>
    </div>
    <div class="row">
        <div class="pull-right">
            <div *ngIf="UpdateBtn">
                <button class="btn btn-default btn-play-cancel " (click)="cancelEdForm(newcaFormdet)">Cancel</button>
                <button class="btn btn-warning btn-play-update" (click)="onEditSubmit(newcaFormdet)">Update</button>
            </div>
            <div *ngIf="!UpdateBtn">
                <button class="btn btn-default btn-play-cancel " (click)="cancelForm()">Cancel</button>
                <button class="btn btn-primary btn-play-create" (click)="onSubmit(newcaFormdet)">Create</button>
            </div>


        </div>
    </div>
</div>