<section style="cursor: pointer">
    <header>
        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 cAssDet">
            <app-avatar-pic [initials]="Initials(usersData.pgUserInfoMstr.fullName)"></app-avatar-pic>
            <div class="pad-left">
                <h3>{{ usersData.pgUserInfoMstr.fullName }}</h3>
                <div class=""><span class="" *ngIf="usersData.employeeNo != null">EID{{usersData.employeeNo}}</span>&nbsp; <span class="usrLocation">{{usersData.pgUserInfoMstr.pgLocation.city}}</span></div>
                <div class="usrEmail"> {{usersData.emailId}}</div>
            </div>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 iconClick">
            <div class="pull-left" *ngIf="otherIcons">
                <!-- <mat-icon (click)="deleteUserInfo(usersData)">delete</mat-icon> -->
                <mat-icon (click)="editUserInfo(usersData.id, usersData)"> edit</mat-icon>
            </div>
            <div class="pull-left iconClick" (click)="showOtherIcons(usersData.id)" *ngIf="!otherIcons">
                <mat-icon>
                    more_horiz
                </mat-icon>
            </div>
        </div>
    </header>

    <div class="skillsDiv">
        <div *ngIf="showTheSkills">
            <span class="skillDets" *ngFor="let sk of usersData.pgUserInfoMstr.pgUserSkillMapping" #showSkill>{{sk.pgSkillTrackDtls.skillTrackDtlsName}}</span>
            <!-- {{sk.pgSkillTrackDtls.pgSkillTrackMstr.skillTrackName}} -->
        </div>
        <div *ngIf="!showTheSkills">
            <span class="myRed" #updateSkill>User has not added the skills</span>
        </div>
    </div>
    <footer>

        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pad-top">
            <div class="footer-desc" *ngFor="let item of usersData.pgUserInfoMstr.pgRoleUser">
                <span class="">{{item.pgRolePrivilege.pgRoleMstr.roleName}}</span>
                <span class="act_tic" *ngIf="item.pgRolePrivilege.pgRoleMstr.status == 'ACTIVE'"><img src="{{usr_img_path + 'Ok_Icon.png'}}" /></span>
            </div>
        </div>

    </footer>
    <!-- <pre>{{usersData | json}}</pre> -->
</section>