<div  *ngIf="employee" class="card profile shadow">
  <div class="card-body my-4">
    <div class="row align-items-center">
      <div class="col-md-3 text-center mb-5">
        <a href="#!" class="avatar avatar-xl">
          <img src="./assets/images/users/3.jpg" alt="..." class="avatar-img rounded-circle">
        </a>
      </div>
      <div class="col">
        <div class="row align-items-center">
          <div class="col-md-7">
            <h4 class="mb-1 text-bold text-black">{{employee.personalInfo| fullname}}</h4>
            <p class="small mb-3"><span class="text-primary">{{employee.email}}</span></p>
          </div>
          <div class="col">
          </div>
        </div>
        <div class="row mb-4">
          <div class="col-md-7">
            <p class="text-muted">الوظيفة {{employee.workInfo.workJob}} , صفة العمل {{employee.workInfo.workType}} </p>
          </div>
          <div class="col">
            <p class="small mb-0 text-muted">ساعات عملي {{employee.availability.currentWorkingHours}}</p>
            <p class="small mb-0 text-muted">يعمل لدى {{employee.departmentName}}</p>
          </div>
        </div>
        <div class="row align-items-center">
          <div class="col mb-2">
            <button type="button" [routerLink]="['/employees/participates',id]" class="btn m-3 btn-primary">استعراض مساهماتي</button>
            <button type="button" class="btn m-3 btn-secondary">إصدار تقرير بعملي</button>
          </div>
        </div>
      </div>
    </div> <!-- / .row- -->
  </div> <!-- / .card-body - -->
</div>