{% set objectif = projet.objectifFinancier ? (projet.montantPrevu / projet.objectifFinancier * 100) : 0 %}
<div class=""
     data-controller="projet-charts"
     data-projet-charts-objectif-value="{{ objectif|round(0, 'floor') }}"
     data-projet-charts-type-series-value="{{ [typeApport.totalNature, typeApport.totalFinancier]|json_encode }}"
     data-projet-charts-type-labels-value="{{ ['En nature', 'Financier']|json_encode }}">
            
            <div class="row">
            
              <div class="col-12">
                <div class="">

                  <div class="row">
                    <div class="col-8">

                      <div class="card" style="height: 250px;">
                        <div class="card-body p-0">
                          <div class="d-flex align-items-center my-3">
                            <div class="col-4 pe-3">
                              <div id="chartObjectif" data-projet-charts-target="objectifChart"></div>
                            </div>
                            <div class="col-4 ms-3  pe-3">
                              <h6 class="fw-normal">Montant reçu</h6>
                              <span class="fs-8 text-black">{{projet.montantPrevu | separate_thousands }} €</span><br/>
                              / {{projet.objectifFinancier | separate_thousands }} €
                            </div>
                            <div class="col-4 ms-3">
                              <h6 class="fw-normal">Partenariats</h6>
                              <span class="fs-8 text-black">{{mecenes | length }}</span>
                            </div>
                          </div>
                        </div>
                      </div>

                    </div>

                    <div class="col-4">
                      <div class="card" style="height: 250px;">
                        <div class="card-body pb-2">
                          <h4 class="card-title">Types de partenariat</h4>
                        </div>
                        <ul class="feeds ps-0">
                          {% for type in valeurByType %}
                            <div class="feed-item mb-2 py-2 pe-3 ps-4">
                              <div class="d-md-flex align-items-center">
                                <div class="d-flex align-items-center gap-6 ms-2">
                                  <div class="text-truncate">
                                    <span class="fs-4 text-dark fw-medium">{{type.type |capitalize }}</span>
                                  </div>
                                </div>
                                <div class="justify-content-end text-truncate ms-5 ms-md-auto ps-4 ps-md-0">
                                  <span class="fs-4 text-muted">{{type.total | separate_thousands }} €</span>
                                </div>
                              </div>
                            </div>
                          {% endfor %}
                          
                        </ul>
                      </div>
                    </div>
                  </div>
                  
        
                </div>

              </div>  

              <div class="col-4 p-4">
                <div class="card" style="height:350px;">
                  <div class="card-body p-4">
                    <h6 class="fw-bold fs-5 mb-1">Top partenariat</h6>

                    <ul class="feeds ps-0">
                        {% for convention in top5mecenes %}
                          <div class="feed-item mb-2 py-2 pe-3 ps-4">
                            <div class="d-md-flex align-items-center">
                              {% include '@App/partials/components/badge_partenaire.html.twig' with {mecene: convention.mecene, taille: 40} %}
                              <div class="justify-content-end text-truncate ms-5 ms-md-auto ps-4 ps-md-0">
                                <span class="fw-normal">{{convention.valeur | separate_thousands}} €</span>
                              </div>
                            </div>
                          </div>
                        {% endfor %}
                        
                      </ul>

                  </div>
                </div>
              </div> 

              <div class="col-4 p-4">
                <div class="card" style="height:350px;">
                  <div class="card-body p-4">
                    <h6 class="fw-bold fs-5 mb-1">Documents du projets</h6>

                    <div class="feed-item mb-2 py-2 pe-3 ps-4">
                      <div class="d-md-flex align-items-center">
                        <div class="d-flex align-items-center gap-6 ms-2 fs-4 fw-normal text-black">
                          Conventions éditées
                        </div>
                        <div class="justify-content-end text-truncate ms-5 ms-md-auto ps-4 ps-md-0">
                          <span class="fs-4 fw-normal text-black">{{statProjet.conventionDoc}}</span> / {{statProjet.total}}
                        </div>
                      </div>
                    </div>

                    <div class="feed-item mb-2 py-2 pe-3 ps-4">
                      <div class="d-md-flex align-items-center">
                        <div class="d-flex align-items-center gap-6 ms-2 fs-4 fw-normal text-black">
                          Conventions signées
                        </div>
                        <div class="justify-content-end text-truncate ms-5 ms-md-auto ps-4 ps-md-0">
                          <span class="fs-4 fw-normal text-black">{{statProjet.conventionDocSigned}}</span> / {{statProjet.conventionDoc}}
                        </div>
                      </div>
                    </div>

                    <div class="feed-item mb-2 py-2 pe-3 ps-4">
                      <div class="d-md-flex align-items-center">
                        <div class="d-flex align-items-center gap-6 ms-2 fs-4 fw-normal text-black">
                          Reçus fiscaux édités
                        </div>
                        <div class="justify-content-end text-truncate ms-5 ms-md-auto ps-4 ps-md-0">
                          <span class="fs-4 fw-normal text-black">{{statProjet.totalMecenatAvecRecu}}</span> / {{statProjet.totalMecenat}}
                        </div>
                      </div>
                    </div>

                    <div class="feed-item mb-2 py-2 pe-3 ps-4">
                      <div class="d-md-flex align-items-center">
                        <div class="d-flex align-items-center gap-6 ms-2 fs-4 fw-normal text-black">
                          Factures éditées
                        </div>
                        <div class="justify-content-end text-truncate ms-5 ms-md-auto ps-4 ps-md-0">
                          <span class="fs-4 fw-normal text-black">{{statApport.totalApportsAvecFacture}}</span> / {{statApport.totalApportsSponsoring}}
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div> 

              <div class="col-4 p-4">
                <div class="card" style="height:350px;">
                  <div class="card-body p-4">
                    <h6 class="fw-bold fs-5 mb-1">Nature des apports</h6>

                    <div id="chartTypeApport" data-projet-charts-target="typeChart"></div>
                  </div>
                </div>
              </div>


            </div>
          </div>