<div class="container-fluid" *ngIf="project">
    <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 btn-secondary m-1">Print</button>
          </div>
        </div>
        <div class="card shadow" id="pdfContent">
          <div class="card-body p-5">
            <project-header [projectInfo]="project.projectInfo"></project-header>
            <div class="row mb-5">
              <div class="col-md-4">
                <p class="mb-4">
                  <strong>ذاتية المشروع</strong>
                  <br /> رمز المشروع: <small>{{project.projectInfo.code}}</small>
                  <br /> كتاب الطرح : <small>{{project.proposalInfo.proposingBookNumber}} / {{project.proposalInfo.proposingBookDate | date}}</small> 
                  <br />كتاب الموافقة : <small>{{project.projectAggreement.aggreementNumber}} / {{project.projectAggreement.aggreementDate |date}}</small>
                  <br />التمويل : <small> {{project.financialFund.financialStatus}} / {{project.financialFund.source}} </small>
                  
                </p>

              </div>
              <div class="col-md-4 text-center">
                <p class="mb-4">
                  <strong>المعلومات التنفيذية</strong>
                  <br /> الجهة  المنفذة: <small>{{project.executer.name}}</small>
                  <br /> رئيس فريق العمل: <small>{{project.teamLeader.personalInfo | fullname}}</small>
                  <br /> مدير المشروع : <small>{{project.projectManager.personalInfo | fullname}}</small>
                  <br />ينفذ لصالح : <small> {{project.proposer.customerName}} </small>
                  
                </p>

              </div>
              <div class="col-md-4">
                <p class="mb-4">
                  <strong>معلومات حالة المشروع </strong>
                  <br /> المرحلة التطويرير : <small>{{project.currentState}} </small>
                
                </p>
              </div>
            </div> <!-- /.row -->
            <hr>
            <p>مراحل المشروع</p>
            <table class="table table-borderless table-striped">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">اسم المرحلة</th>
                  <th scope="col" class="text-left">الوصف</th>
                  <th scope="col" class="text-left">نسبة الانجاز</th>
                  <th scope="col" class="text-left">النسبة التثقيلية</th>
                  <th scope="col" class="text-left">تاريع البدء</th>
                  <th scope="col" class="text-left">مدة التنفيذ</th>
                  
                </tr>
              </thead>
              <tbody>
                <tr  *ngFor="let step of  project.steps " >
                  <th scope="row"></th>
                  <td> {{step.stepInfo.stepName}}
                  </td>
                  <td class="text-left">{{step.stepInfo.description}}</td>
                  <td class="text-left">{{step.currentCompletionRatio}}</td>
                  <td class="text-left">{{step.weight}}</td>
                  
                  <td class="text-left">{{step.stepInfo.startDate | date}}</td>
                  <td class="text-left">{{step.stepInfo.duration}}</td>
                </tr>
              </tbody>
            </table>
            <hr>
            <p>المشاركين في المشروع</p>
            <table class="table table-borderless table-striped">
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col" clsss="text-center">الرقم الذاتي</th>
                  <th scope="col" class="text-center">اسم المشارك</th>
                  <th scope="col" class="text-center">صفة العمل</th>
                  <th scope="col" class="text-center">الهيئة</th>
                  <th scope="col" class="text-center">نسبة التفرغ</th>
                  <th scope="col" class="text-center">المساهمة</th>
                  
                </tr>
              </thead>
              <tbody>
                <tr  *ngFor="let participant of  project.employeeParticipates" >
                  <th scope="row"></th>
                  <td class="text-center"> {{participant.employee.hiastId}}
                  </td>
                  <td class="text-center">{{participant.employee.personalInfo | fullname }}</td>                  <td class="text-center">{{participant.employee.workInfo.workJob}}</td>
                  <td class="text-center">{{participant.employee.workInfo.workType}}</td>
                  <td class="text-center">{{participant.partialTimeRatio}}</td>
                  
                  <td class="text-center">{{participant.role}}</td>
                </tr>
              </tbody>
            </table>

       
            <div class="row mt-5">
              <div class="col-2 text-center">
                <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
              </div>
              <div class="col-2">
            
                <p class="mb-4">
                  <strong>مدير المشروع </strong>
                  <br/><small>{{project.projectManager.personalInfo.firstName}}</small>
                    
                  </p>
  
              </div>
              <div class="col-2">
            
                <p class="mb-4">
                  <strong>رئيس فريق العمل </strong>
                  <br/><small>{{project.projectManager.personalInfo.firstName}}</small>
                    
                  </p>
  
              </div>
              <div class="col-2">
            
                <p class="mb-4">
                  <strong>الجهة الطارحة </strong>
                  <br/><small>{{project.proposer.customerName}}</small>
                    
                  </p>
  
              </div>
              <div class="col-2">
            
                <p class="mb-4">
                  <strong>الجهة المنفذة  </strong>
                  <br/><small>{{project.executer.name}}</small>
                    
                  </p>
  
              </div>  
              <div class="col-2 text-center">
                <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
              </div>  
            </div> <!-- /.row -->
          </div> <!-- /.card-body -->
        </div> <!-- /.card -->
      </div> <!-- /.col-12 -->

    </div> <!-- .row -->
    <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">
          </div>
        </div>
        <div class="card shadow" id="pdfContent">
          <div class="card-body p-5">
            <div class="row ">
              <div class="col-2 text-center">
                <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
              </div>
              <div class="col-8">
            
  
              </div>  
              <div class="col-2 text-center">
                <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
              </div>  
            </div> <!-- /.row -->
  
            <hr>
            <div class="row mt-5">
              <button class="btn btn-primary">لاطلاع على  خطة الانفاق</button>
              <button class="btn btn-primary">الاطلاع على المرفقات </button>
              <button class="btn btn-primary">الاطلاع على عمليات المتابعة</button>
            
            </div>
            <div class="row mt-5 d-flex align-items-around">
              <button class=" btn btn-primary">إضافة مرفقات</button>
              <button class=" btn btn-primary">إضافة دراسة جدوى </button>
              <button class=" btn btn-primary">إضافة تصنيف مشروع</button>
            
            </div>
            
            <div class="row mt-5">
              <button class="btn btn-primary">إضافة مرحلة</button>
              <button class="btn btn-primary">إضافة مشارك</button>
           </div>
           <div class="row mt-5">
            <button class="btn btn-primary">إضافة عملية متابعة</button>
            
            
          </div>
           <hr>
            
            <div class="row mt-5">
              <div class="col-2 text-center">
                <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
              </div>
              <div class="col-8">
            
              </div>
              <div class="col-2 text-center">
                <img src="/assets/images/users/4.jpg" class="navbar-brand-img brand-sm mx-auto my-4" alt="...">
              </div>  
            </div> <!-- /.row -->
          </div> <!-- /.card-body -->
        </div> <!-- /.card -->
      </div> <!-- /.col-12 -->
      </div>
  </div> <!-- .container-fluid -->
  