<div class="card shadow mb-4">
    <div class="card-body text-center">
      <div class="avatar avatar-lg mt-4">
        <a href="">
          <img src="./assets/images/users/4.jpg" alt="..." class="avatar-img rounded-circle">
        </a>
      </div>
      <div class="card-text my-2">
        <strong class="card-title my-0">{{participant.employee.personalInfo | fullname}}</strong>
        <p class="small text-muted mb-0">صفة المساهمة {{participant.role}}</p>
        <p class="small"><span class="badge badge-light text-muted"> {{participant.employee.workInfo.workType}} {{participant.employee.workInfo.workJob}}</span></p>
      </div>
    </div> <!-- ./card-text -->
    <div class="card-footer">
      <div class="row align-items-center justify-content-between">
        <div class="col  text-center">
          <small>
            <button (click)="onSelected()" class="btn btn-primary">تفاصيل </button>
          </small>
        </div>
      
        <div class="col  text-center">
          <small>
            <button [routerLink]="['/projects',participant.projectId,'history','participationChange',participant.employeeId]" class="btn  btn-secondary">التبدلات</button>
          </small>
        </div>
      
      </div>
    </div> <!-- /.card-footer -->
  </div>