{% extends '@App/partials/base.html.twig' %}

{% block content %}

      <div class="body-wrapper">
        <div class="container-fluid">

 
          <div class="row">

            <div class="col-lg-8">
              <div class="row flex-nowrap">
                <div class="col">
                  <div class="card">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="solar:widget-3-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Projets actifs</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{projetActifs | length}}</h4>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="solar:user-check-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Projets financés</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{conventions | length}}</h4>
                    </div>
                  </div>
                </div>

                <div class="col">
                  <div class="card">
                    <div class="card-body text-center px-9 pb-4">
                      <div class="d-flex align-items-center justify-content-center round-48 rounded text-bg-primary flex-shrink-0 mb-3 mx-auto">
                        <iconify-icon icon="solar:euro-broken" class="fs-7 text-white"></iconify-icon>
                      </div>
                      <h6 class="fw-normal fs-3 mb-1">Montant total financé</h6>
                      <h4 class="mb-3 d-flex align-items-center justify-content-center gap-1">
                        {{montant | separate_thousands}} €</h4>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-body pb-4">
                  <div class="d-md-flex align-items-center justify-content-between mb-4">
                    <div class="hstack align-items-center gap-3">
                      <div>
                        <h5 class="card-title">Financement et Projets</h5>
                        <p class="card-subtitle mb-0">2025</p>
                      </div>
                    </div>
                  </div>
                  <div style="height: 285px;" class="me-n7">
                    <div id="chart"></div>
                  </div>
                </div>
              </div>

            </div>

            <div class="col-lg-4">
              <div class="card">
                <div class="card-body pb-4">
                  <div class="d-md-flex align-items-center justify-content-between mb-4">
                    <div class="hstack align-items-center gap-3">
                      <div>
                        <h5 class="card-title">Projets financés</h5>
                        <p class="card-subtitle mb-0">2025</p>
                      </div>
                    </div>
                  </div>
                  <div class="me-n7">
                     <table class="table text-nowrap mb-0 align-middle"> 
                        <tbody>

                          {% for convention in conventions %}
                     
                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                
                                  {% if convention.projet.logo is not null %}
                                    <img src="{{asset('uploads/projets/logos/' ~ convention.projet.logo)}}" height="40">
                                  {% endif %}
                                  <div class="ms-3">
                                    <h6 class="fs-4 fw-semibold mb-0">{{convention.projet.titre}}</h6>
                                    <span class="fw-normal">{{convention.valeur | separate_thousands}} €</span>
                                  </div>
                                
                                </div>
                              </td>
                            </tr>

                          {% endfor %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

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

{% endblock %}