<mat-card>
  <!-- TODO: find pic -->
  <mat-icon class="edit-btn pull-right" (click)="goToEdit()">edit</mat-icon>

  <app-avatar-pic [pic]="profilePic" [initials]="Initials(userData.fullName)"></app-avatar-pic>
  <div class="candidate">


    <h4>
      {{userData.fullName}}
    </h4>

    <p>
      {{userData.jobId}}
      <span class="exp_level" *ngIf="userData.pgExperienceLevel">{{userData.pgExperienceLevel.experienceLevel}}</span>
    </p>

    <!-- TODO: evaluate security on this!
    <h5>
      <span class="_ID">{{userData.governmentId}}</span>
    </h5> -->

    <div class="badges">
      <app-skills [skills]="userData.userInfoMstr.pgUserSkillMapping"></app-skills>

    </div>

  </div>

  <div class="field-row">
    <img src="{{imageUrl}}/assets/img/Taflow/location.png"/>
    <span class="dark">{{userData.city}}</span>
  </div>

  <div class="field-row">
    <img src="{{imageUrl}}/assets/img/Taflow/timezone.png" />
    <span class="dark">{{userData.createdDt | date:'EEEE, MMMM d, y, h:mm:ss a' }}<br/></span>
    <span class="pale">Eastern Standard Time(UTC/GMT-5 hours)</span>
  </div>

  <div *ngIf="showApproveReject" class="clearfix select_reject_container">
    <div class="col-md-6">
      <button class="btn btn-danger col-md-12" (click)="showRejectModal()">Reject</button>
    </div>
    <div class="col-md-6">
      <button class="btn btn-success col-md-12" (click)="showAproveModal()">Select</button>
    </div>
  </div>

</mat-card>
