<div class="col-md-12 col-sm-12 no-padding left-pannel">
  <div class="col-md-12 col-xs-12 col-sm-12 no-padding user">    
    <div class="centered user-pic">
            <img src="{{img_path + 'avatar.png'}}" alt="">
        </div>
        <!-- <div class="centered user-score">
            <p class="user-score-text">50
                <img class="user-score-heart" alt="heart count" src="{{img_path + 'heart_small.svg'}}">
            </p>
            
        </div> -->
        <div class="user-name">
            <p>{{userInfoDetails?.fullName}}</p>
        </div>
        <div class="skill-ranking"></div>
  </div> 
  <div class="col-md-12 col-xs-12 col-sm-12 no-padding separator"></div>

  <div class="col-md-12 col-xs-12 col-sm-12 no-padding user-padding-left">
      <div class="passes-text">
          <p>Passes</p>
      </div>
      <div class="display-inline">
          <div class="user-passes" [ngClass]="primaryStatus === 'task_passed'? 'remove-gray-out':''">
            <img src="{{img_path + 'coding_ico_lg.png'}}" alt="">
          </div>
          <div class="user-passes" [ngClass]="codingStatus === 'task_passed'? 'remove-gray-out':''">
            <img src="{{img_path + 'whiteboard_ico_lg.png'}}" alt="">
          </div>
          <div class="user-passes" [ngClass]="whiteboardStatus === 'task_passed'? 'remove-gray-out':''">
            <img src="{{img_path + 'leadership_ico_lg.png'}}" alt="">
          </div>
        </div>
  </div>
  
  <div class="col-md-12 col-xs-12 col-sm-12 no-padding separator"></div>
  
  <div class="col-md-12 col-xs-12 col-sm-12 no-padding user-padding-left">
      <div class="passes-text">
        <p>Skills</p>
      </div>
      <div class="skill-text">
        <span *ngFor="let skill of skills" class="no-padding no-margin skill-maring">{{skill?.pgSkillTrackDtls?.skillTrackDtlsName}}</span>
      </div>
  </div>
  
  <div class="col-md-12 col-xs-12 col-sm-12 no-padding separator"></div>
  <div class="col-md-12 col-xs-12 col-sm-12 no-padding user-contact">
  <div class="user-padding-left display-inline">
      <div>
          <img src="{{img_path + 'email_icon.svg'}}" alt="">
      </div>
      <div>
        <p class="user-contact-text">{{userInfoDetails?.emailId}}</p>
      </div>
  </div>

  <div class="user-padding-left display-inline">
      <div>
          <img src="{{img_path + 'telephone_icon.svg'}}" alt="">
      </div>
      <div>
        <p class="user-contact-text">{{userInfoDetails?.contactNumber}}</p>
      </div>
  </div>
  <div class="user-padding-left display-inline">
      <div>
          <img src="{{img_path + 'map_icon.svg'}}" alt="">
      </div>
      <div>
        <p class="user-contact-text">{{userInfoDetails?.city}}</p>
      </div>
  </div>
</div>

</div>