<div class="container padding-bottom-1">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 skillset_newform">

            <mat-select placeholder="Skill Category" ngDefaultControl>
                <!-- [(ngModel)]="newskFormdet.skillCategoryName" -->
                <mat-option name="first" *ngFor="let cat of skillCategory" [value]="cat.skillCategoryId">
                    <!--  -->
                    <span class="pull-left">{{cat.description}}</span>
                    <!-- <div class="sub-titleOf">
                      <span>{{sdata.skillTrackDtlsName.skillTrackDtlsName}} </span></div> -->
                </mat-option>
            </mat-select>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 skillset_newform">
            <mat-form-field>
                <input type="text" matInput [matAutocomplete]="auto" placeholder="Skill Master" ngDefaultControl>
                <!-- [(ngModel)]="newskFormdet.skillMaster.skillTrackName" -->
            </mat-form-field>
            <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
                <mat-option *ngFor="let option of skilltrackResponse" [value]="option.skillMaster.skillTrackName">
                    {{ option.skillMaster.skillTrackName }}
                </mat-option>
            </mat-autocomplete>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 skillset_newform">
            <mat-form-field class="pull-left">
                <input type="text" matInput placeholder="Skills" ngDefaultControl />
                <!-- [(ngModel)]="newskFormdet.skillMaster.skillTrackName" -->
                <!-- <span matTooltip="Separate skills with commas or spaces. Use double quotes for multi-words skills(e.g. 'Onsen UI')" #tooltip="matTooltip">
                                <i class="fa fa-info-circle"></i>
                              </span> -->
            </mat-form-field>
            <i class="fa fa-info-circle pull-right" matTooltip="Separate skills with commas or spaces. Use double quotes for multi-words skills(e.g. 'Onsen UI')">
                <!-- <app-tutorial-step-tooltip>
                    Separate skills with commas or spaces. Use double quotes for multi-words skills(e.g. 'Onsen UI')
                </app-tutorial-step-tooltip> -->
            </i>
            <!-- Separate skills with commas or spaces. Use double quotes for multi-words skills(e.g. “Onsen UI”) -->
        </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">
        <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="row">
        &nbsp;
    </div>
    <div class="">
        <div class="pull-right">
            <button class="btn btn-default" (click)="cancelSkillSetForm()">Cancel</button>
            <button  class="btn btn-primary" (click)="submitTheForm()">Create</button>
            <button  class="btn btn-warning" (click)="updateUsecase()">Update</button>
        </div>
    </div>
    <div class="row">
        <!-- <label for="assessment" class="modal-err-msg">{{errMsg}}</label> -->
    </div>
</div>