<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>
                  <br />نوع المشروع  : <small>{{project.projectClassification.projectType}} </small>
                  <br /> طبيعة المشروع : <small>{{project.projectClassification.projectNature}} </small>
                
                </p>
              </div>
            </div> <!-- /.row -->
            <hr>
            <p><strong>مراحل المشروع</strong></p>
            <step-table [steps]="project.steps"></step-table>
            <hr>
            <participants-table [employeeParticipates]="project.employeeParticipates"></participants-table>
            <p><strong>خطة الانفاق</strong></p>
            <financial-spend-table [financialSpending]="project.financialSpending"></financial-spend-table> 
      
            <project-footer [proposer]="project.proposer" 
                            [executer]="project.executer"
                            [projectManager]="project.projectManager"
                            [teamLeader]="project.teamLeader"
            >

            </project-footer>
          </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 align-items-center mb-4">
              <div class="col-auto">
                <strong>تخطيط المشروع</strong>
              </div>

              <div class="row">
                <div class="col-md-6 col-lg-4">
                  <div class="card shadow mb-4">
                    <div class="card-body file-list">
                      <div class="d-flex align-items-center">
                        <div class="circle circle-md bg-secondary">
                          <span class="fe fe-credit-card fe-16 text-white"></span>
                        </div>
                        <div class="flex-fill ml-4 fname">
                          <strong>إارة خطة الانفاق</strong><br />
                        </div>
                        
                      </div>
                    </div> <!-- .card-body -->
                  </div> <!-- .card -->
                </div> <!-- .col -->
                <div class="col-md-6 col-lg-4">
                  <div class="card shadow mb-4">
                    <div class="card-body file-list">
                      <div class="d-flex align-items-center">
                        <div class="text-center">
                          <div class="circle circle-md bg-secondary">
                            <span class="fe fe-users fe-16 text-white"></span>
                          </div>
                        </div>
                        <div class="flex-fill ml-4 fname">
                          <strong>إضافة معلومات المشروع</strong><br />
                        </div>
                      </div>
                    </div> <!-- .card-body -->
                  </div> <!-- .card -->
                </div> <!-- .col -->
                <div class="col-md-6 col-lg-4">
                  <div class="card shadow mb-4">
                    <div class="card-body file-list">
                      <div class="d-flex align-items-center">
                        <div class="circle circle-md bg-secondary">
                          <span class="fe fe-map fe-16 text-white"></span>
                        </div>
                        <div class="flex-fill ml-4 fname">
                          <strong>إدارة الخطة</strong><br />
                        </div>
                      </div>
                    </div> <!-- .card-body -->
                  </div> <!-- .card -->
                
                </div> <!-- .row -->
      
            </div>

     <hr>     
         <div class="row align-items-center mb-4">
    <div class="col-auto ">
      <strong>معلومات المشروع</strong>
    </div>
    <div class="row">
      <div class="col-md-6 col-lg-4" (click)="this.router.navigate(['/projects/steps/',project.id])">
        <div class="card shadow mb-4">
          <div class="card-body file-list">
            <div class="d-flex align-items-center">
              <div class="circle circle-md bg-secondary">
                <span class="fe fe-credit-card fe-16 text-white"></span>
              </div>
              <div class="flex-fill ml-4 fname">
                <strong>المراحل</strong><br />
              </div>
              
            </div>
          </div> <!-- .card-body -->
        </div> <!-- .card -->
      </div> <!-- .col -->
      <div class="col-md-6 col-lg-4">
        <div class="card shadow mb-4">
          <div class="card-body file-list">
            <div class="d-flex align-items-center">
              <div class="text-center">
                <div class="circle circle-md bg-secondary">
                  <span class="fe fe-users fe-16 text-white"></span>
                </div>
              </div>
              <div class="flex-fill ml-4 fname">
                <strong>إضافة المرفقات</strong><br />
              </div>
            </div>
          </div> <!-- .card-body -->
        </div> <!-- .card -->
      </div> <!-- .col -->
      <div class="col-md-6 col-lg-4" (click)="this.router.navigate(['/projects/participants/',project.id])">
        <div class="card shadow mb-4">
          <div class="card-body file-list">
            <div class="d-flex align-items-center">
              <div class="circle circle-md bg-secondary">
                <span class="fe fe-map fe-16 text-white"></span>
              </div>
              <div class="flex-fill ml-4 fname">
                <strong>إدارة المشاركين</strong><br />
              </div>
            </div>
          </div> <!-- .card-body -->
        </div> <!-- .card -->
      
      </div> <!-- .row -->

  </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 -->
  