<div>
    <h2 class="pg-title"> {{userFormTitle}}</h2>
    <label for="assessment" *ngIf="errMsg" class="modal-err-msg">{{errMsg}}</label>
    <div class="container">
        <!-- <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 user_newform">
                <mat-form-field class="">
                    <input matInput placeholder="Employee Number" type="text" [(ngModel)]="newusrFormdet.employeeNo">
                    <!-- [(ngModel)]="newusrFormdet.userTitle"--
                </mat-form-field>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 user_newform" style="visibility:hidden">
                &nbsp;
            </div>
        </div> -->
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 user_newform">
                <mat-form-field class="">
                    <input matInput placeholder="First Name" type="text" [(ngModel)]="newusrFormdet.firstName">
                    <!-- -->
                </mat-form-field>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 user_newform">
                <mat-form-field class="">
                    <input matInput placeholder="Last Name" type="text" [(ngModel)]="newusrFormdet.lastName">
                    <!-- -->
                </mat-form-field>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 user_newform">
                <mat-form-field class="">
                    <input matInput placeholder="Email" type="email" [(ngModel)]="newusrFormdet.email" [disabled]="editUserDisabled">
                    <!-- -->
                </mat-form-field>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 user_newform">
                <mat-select placeholder="Location" [(ngModel)]="newusrFormdet.location" #skillTrackName ngDefaultControl>
                    <!-- (change)="onSkillMaster($event, skillTrackName.value)" 
                 [(value)]="skillmaster_selected" -->
                    <mat-option name="first" *ngFor="let loc of locations" [value]="loc.locationId">
                        <!--  -->
                        <span class="pull-left">{{ loc.address }} , {{ loc.city}} </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 user_newform">
                <mat-select placeholder="Skill Master" [(value)]="skillmaster_selected" (change)="onSkillMaster($event, skillTrackName.value)" [(ngModel)]="newusrFormdet.skillTrackMstrId" #skillTrackName ngDefaultControl [disabled]="editUserDisabled">
                    <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>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 user_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]="skillArrUsr.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 user_newform">
                <mat-select multiple placeholder="Roles & Privileges" [(ngModel)]="newusrFormdet.role" #rolesnprevl> -->
        <!-- (change)="onSkillMaster($event, skillTrackName.value)"  >
                 [(value)]="skillmaster_selected" -->
        <!-- <mat-option name="first" *ngFor="let rol of rolesList" [value]="rol.roleId">
                        {{ rol.roleName }}
                        <mat-slide-toggle class="example-margin" (change)="changeEvent($event,rol.roleId)">
                            Write Access
                        </mat-slide-toggle> -->
        <!--<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 user_newform">
                <mat-select multiple placeholder="Roles" [(ngModel)]="newusrFormdet.role" #rolesnprevl>
                    <mat-option name="first" *ngFor="let rol of rolesList" [value]="rol.pgRoleMstr.roleId">
                        {{rol.pgRoleMstr.roleName}}
                    </mat-option>
                </mat-select>
            </div>
        </div>
        <!-- <div class="container">
            <quill-editor [(ngModel)]="newusrFormdet.userDesp" (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)]="newusrFormdet.sandBoxId"> Available sandbox content to be added </div>
          </div>
      </div> -->
        <div class="row">
            <div class="pull-right">
                <button class="btn btn-default btn-play-cancel" (click)="cancelUserMForm()">Cancel</button>
                <button *ngIf="!isEdit" class="btn btn-primary btn-play-create" (click)="createUserfromAdmin(newusrFormdet)">ADD</button>
                <button *ngIf="isEdit" class="btn btn-warning btn-play-update" (click)="updateUserfromAdmin(newusrFormdet)">Update</button>
            </div>
        </div>
        <!-- <div class="row">
            <pre>{{newusrFormdet | json}}</pre>
        </div> -->
    </div>
</div>