<div class="base card-picture">
  <div class="picture-details">
    <figure class="oval" >


      <div class="flowPhoto">
          <input type="file" name="profilePhoto" id="profilePhoto" [style.display]="'none'" #inputFile (change)="changeProfilePhoto(inputFile)"
          accept=".jpg, .jpeg, .png">
        <img  [src]="data?.pictureImage || ''" alt="" #imagePhoto class='profilePic'>
      </div>
    </figure>
    <div class="icon-photo-camera" (click)='inputFile.click();' *ngIf='!modifyPhoto'>
      <mat-icon>photo_camera</mat-icon>
    </div>
    <div id='modifyButton' *ngIf='modifyPhoto'>

      <div class="confirmPhoto" (click)='savePhoto()'>
        <mat-icon>check</mat-icon>
      </div>
      <div class="cancelPhoto" (click)='cancelPhoto()'>
        <mat-icon>close</mat-icon>
      </div>
    </div>
    <p class="describe-principal">{{data.UserInfoDtls?.pgUserInfoMstr.fullName}}</p>
    <div class="describe-second">
      <p class="text-small">{{data.UserInfoDtls?.employeeNo}}</p>
      <br>
      <p class="text-middle">{{data.UserInfoDtls?.jobId}}</p>
    </div>
  </div>
  <div class="reports-to">
    <h4>Reports to</h4>
    <!-- <div class="assigned">
      <figure>
        <img src="assets\img\employee\dashboard\home\user.png" alt="" width="40" height="40">
      </figure>
      <div>
        <p class="describe-principal name-assigned">Gerome Hudgeons</p>
        <p class="describe-second text-small">Principle Designer</p>
      </div>
    </div> -->
  </div>
</div>
