<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">
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-12">
            <h2 class="h3 mb-4 page-title">إدارة المشروع</h2>
            <div class="row mt-5 align-items-center">
              <div class="col-md-3 text-center mb-5">
                <div class="avatar avatar-xl">
                  <img src="./assets/images/users/4.jpg" alt="..." class="avatar-img ">
                </div>
              </div>
              <div class="col">
                <div class="row align-items-center">
                  <div class="col-md-7">
                    <h4 class="mb-1">{{project.projectInfo.name}}</h4>
                    <p class="small mb-3"><span class="badge badge-dark">{{project.currentState | stateTranslate}}</span></p>
                  </div>
                </div>
                <div class="row mb-4">
                  <div class="col-md-7">
                    <p class="text-muted"> {{project.projectInfo.description}}</p>
                  </div>
                  <div class="col">
                    <p class="small mb-0 text-muted">تاريخ البدء {{project.projectInfo.startDate | date}}</p>
                    <p class="small mb-0 text-muted">تاريخ الانتهاء المتوقع {{project.projectInfo.expectedEndDate | date}}</p>
                    <p class="small mb-0 text-muted">الرمز {{project.projectInfo.code}}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mt-5 align-items-center">
              <div class="col">
                <div class="row mb-4">
                  <div class="col">
                    <p class="small mb-0 text-muted">التمويل  {{project.financialFund.financialStatus}} / {{project.financialFund.source}}</p>
                    <p class="small mb-0 text-muted">كتاب الطرح  {{project.proposalInfo.proposingBookDate| date}} / {{project.proposalInfo.proposingBookNumber}}</p>
                    <p class="small mb-0 text-muted">كتاب الموافقة  {{project.projectAggreement.aggreementDate | date}} / {{project.projectAggreement.aggreementNumber}}</p>
                  </div>
                  <div class="col">
                    <p class="small mb-0 text-muted">الجهة الطارحة {{project.proposer.customerName}}</p>
                    <p class="small mb-0 text-muted">مدير المشروع {{project.projectManager.personalInfo |fullname}}</p>
                    <p class="small mb-0 text-muted">رئيس فريق العمل {{project.teamLeader.personalInfo | fullname}}</p>
                  </div>
                  <div class="col">
                    <p class="small mb-0 text-muted">الجهة المنفذة {{project.executer.name}}</p>
                    <p class="small mb-0 text-muted">طبيعة النشاط {{project.projectClassification.projectNature}}</p>
                    <p class="small mb-0 text-muted">تصنيف النشاط {{project.projectClassification.projectType}}</p>
                  </div>
                
                </div>
                </div>
            
                </div>
            </div>


            <div class="row my-4">
              <div class="col-md-4">
                <div class="card mb-4 shadow">
                  <div class="card-body my-n3">
                    <div class="row align-items-center">
                      <div class="col-3 text-center">
                        <span class="circle circle-lg bg-light">
                          <i class="fe fe-user fe-24 text-primary"></i>
                        </span>
                      </div> <!-- .col -->
                      <div class="col">
                        <a href="#">
                          <h3 class="h5 mt-4 mb-1">Personal</h3>
                        </a>
                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit nisl ullamcorper, rutrum metus in, congue lectus.</p>
                      </div> <!-- .col -->
                    </div> <!-- .row -->
                  </div> <!-- .card-body -->
                  <div class="card-footer">
                    <a href="" class="d-flex justify-content-between text-muted"><span>Account Settings</span><i class="fe fe-chevron-right"></i></a>
                  </div> <!-- .card-footer -->
                </div> <!-- .card -->
              </div> <!-- .col-md-->
              <div class="col-md-4">
                <div class="card mb-4 shadow">
                  <div class="card-body my-n3">
                    <div class="row align-items-center">
                      <div class="col-3 text-center">
                        <span class="circle circle-lg bg-light">
                          <i class="fe fe-shield fe-24 text-primary"></i>
                        </span>
                      </div> <!-- .col -->
                      <div class="col">
                        <a href="#">
                          <h3 class="h5 mt-4 mb-1">Security</h3>
                        </a>
                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit nisl ullamcorper, rutrum metus in, congue lectus.</p>
                      </div> <!-- .col -->
                    </div> <!-- .row -->
                  </div> <!-- .card-body -->
                  <div class="card-footer">
                    <a href="" class="d-flex justify-content-between text-muted"><span>Security Settings</span><i class="fe fe-chevron-right"></i></a>
                  </div> <!-- .card-footer -->
                </div> <!-- .card -->
              </div> <!-- .col-md-->
              <div class="col-md-4">
                <div class="card mb-4 shadow">
                  <div class="card-body my-n3">
                    <div class="row align-items-center">
                      <div class="col-3 text-center">
                        <span class="circle circle-lg bg-light">
                          <i class="fe fe-bell fe-24 text-primary"></i>
                        </span>
                      </div> <!-- .col -->
                      <div class="col">
                        <a href="#">
                          <h3 class="h5 mt-4 mb-1">Notifications</h3>
                        </a>
                        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit nisl ullamcorper, rutrum metus in, congue lectus.</p>
                      </div> <!-- .col -->
                    </div> <!-- .row -->
                  </div> <!-- .card-body -->
                  <div class="card-footer">
                    <a href="" class="d-flex justify-content-between text-muted"><span>Notification Settings</span><i class="fe fe-chevron-right"></i></a>
                  </div> <!-- .card-footer -->
                </div> <!-- .card -->
              </div> <!-- .col-md-->
            </div> <!-- .row-->
            
          </div> <!-- /.col-12 -->
        </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" [routerLink]="['/projects/spending/',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">
                  <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>
<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(['/tracks/project/',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> 
    
</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 -->
  