<div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="row align-items-center mb-4">
          <div class="col">
            <h2 class="h5 page-title">
              <small class="text-muted text-uppercase">بطاقة انجاز مشروع</small>
            </h2>
          </div>
          <div class="col-auto">
            <button
              type="button"
              
            (click)="downloadAsPdf()"
              class="btn mr-1 btn-secondary m-1"
            >
              طباعة
            </button>
            <button
              type="button"
              [routerLink]="['/reports/timeline/', project.id]"
              class="btn mr-1 btn-secondary m-1"
            >
              تقرير خطة زمنية
            </button>
          </div>
        </div>
        
        <div class="card shadow" id="pdfContent"  *ngIf="project && contributers ">
          <div class="card-body p-5">
            <project-header [projectInfo]="project.projectInfo"></project-header>
            <project-subjective [project]="project"> </project-subjective>
            <hr />
            <p><strong>تقييم الجهة الطارحة :</strong>{{completion.customerRate}}</p>
            <p><strong>ملاحظات الجهة الطارحة :</strong>{{completion.customerNotes}}</p>
            <p><strong>تاريخ الانهاء :</strong>{{completion.completionDate | date }}</p>
            
            <employee-contribution-table
              [contributers]="contributers"
            >

            </employee-contribution-table>
            <hr>
            
            <project-footer
              [proposer]="project.proposer"
              [executer]="project.executer"
              [projectManager]="project.projectManager"
              [teamLeader]="project.teamLeader"
            >
            </project-footer>
          </div>
          <!-- /.card-body -->
        </div>
        
        <card-skeleton  *ngIf="!(project && contributers)">

        </card-skeleton>
        
        <!-- /.card -->
      </div>
      <!-- /.col-12 -->
    </div>
  </div>
  