{% set globalIndex = 1 %}
{% set sitesByCategory = {} %}

{# Regrouper les sites par catégorie #}

{% for category, sites in groupedSites  %}
{% for site in sites %}
  <div class="modal fade" tabindex="-1" id="modal_canvas_{{ globalIndex }}">
    <div class="modal-dialog modal-fullscreen-custom" style="max-width:90%">
      <div class="modal-content">
         <div class="modal-body">
             <div class="modal-header">
                <h6 class="modal-title">{{ site.zone }}</h6>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
              </div>
              <div class="row">
                 <div class="col-xl-12 col-sm-12 w-100">
                   <div class="d-flex justify-content-between align-items-center">
                     <div>
                      <button  class="btn btn-primary px-2 mt-2 zoom-btn" id="zoomIn" data-slider="3" data-action="zoomIn" data-canvas-id="statistics-view3-modal-block-{{ loop.index }}" ><i class="fa fa-plus"></i></button>
                      <button  class="btn btn-primary px-2 mt-2 zoom-btn" id="zoomOut" data-slider="3" data-action="zoomOut" data-canvas-id="statistics-view3-modal-block-{{ loop.index }}"><i class="fa fa-minus"></i></button>
                      <button  class="btn btn-primary px-2 mt-2 zoom-btn" id="resetZoom" data-action="resetZoom" data-canvas-id="statistics-view3-modal-block-{{ loop.index }}" data-slider="3">Reset</button>
                   </div>
                    <div class="d-flex justify-content-end">
                     <span class="text-right me-2">
                      <button class="btn btn-primary px-4 mt-2 download-chart" graph-id="statistics-view3-modal-block-{{ loop.index }}" view-number="3" data-site="{{ site.zone }}"><i class="fas fa-download"></i> Export graph</button>
                     </span>
                    </div>
                  </div>
                
                   <p class="text-justify p-2">
                    <canvas id="statistics-view3-modal-block-{{ globalIndex }}" data-site="{{ site.zone }}" data-source="modal"
                    title-graph="GIHSN_patients_positive_influenza_viruses_over_weeks" title="Patients positive to Influenza Viruses in the GIHSN"></canvas>
                   </p>
                 </div>
               </div>
               <div class="modal-footer"><button class="btn btn-primary" data-bs-dismiss="modal" type="button">Close</button></div>
            </div>
          </div>
        </div>
    </div>    
    {% set globalIndex = globalIndex + 1 %}
            {% endfor %}                                      
{% endfor %}