{% include 'partials/header.html.twig' %}

      <div class="body-wrapper" id="page-projet-root" data-import-pending="{{ projet.import ? '0' : '1' }}" data-projet-id="{{ projet.idtoken }}">
        <div class="container-fluid">
          

          <div class="card card-body py-3">
            <div class="row align-items-center">
              <div class="col-12">
                <h5>Présentations du projet</h5>
                <div class="d-sm-flex align-items-center justify-space-between">
                  
                  <a href="{{path('app_index')}}" class="p-2"><iconify-icon icon="solar:home-2-broken" class="fs-6"></iconify-icon> </a> >
                  <a href="{{path('projet_index')}}" class="p-2">Projets </a> >
                  <a href="{{path('projet_view', {'id': projet.idtoken})}}" class="p-2">{{projet.titre}} </a> >
                  <a href="{{path('projet_view_presentation', {'id': projet.idtoken})}}" class="p-2">Présentations </a> >
                  <a href="{{path('projet_view_presentation_view', {'id': projet.idtoken, 'presentationid': presentation.idtoken})}}" class="p-2">{{presentation.titre}} </a> 
                </div>
              </div>
            </div>
          </div>
          
          <div >
            
            <div id="block-builder" data-presentation-id="{{presentation.idtoken}}">
              <div class="mb-4 text-end">
                <a class="btn btn-outline-danger" target="_blank" href="{{path('public_presentation_view', {presentationid: presentation.idtoken})}}"><i class="ti ti-eye fs-4 me-2"></i>Voir la présentation</a>
                <!-- etc. -->
              </div>

              <!-- Toolbar de blocs -->
              <div id="block-toolbar" class="mb-4">
                <button class="btn btn-outline-primary" data-type="text">+ Bloc texte</button>
                <button class="btn btn-outline-primary" data-type="chiffres">+ Bloc chiffres</button>
                <button class="btn btn-outline-primary" data-type="description">+ Bloc présentation</button>
                <button class="btn btn-outline-primary" data-type="image">+ Bloc image</button>
                <button class="btn btn-outline-primary" data-type="formule">+ Bloc formules</button>
                <!-- etc. -->
              </div>

              <div class="row">
                <div class="col-9">
                  <!-- Zone de construction -->
                  <div id="blocks-container">
                    {% for block in presentation.projetBlocks %}
                      {% include '@Projet/projet/presentation/block/' ~ block.type ~ '.html.twig' with { block: block } %}
                    {% endfor %}
                  </div>
                </div>

                <div class="col-3 card">
                  <div class="card-body">
                    <h4>Paramètres</h4>

                    <div class="d-flex align-items-center gap-2 mb-3">
                      <button id="btn-upload-bg" class="btn btn-outline-primary" type="button">
                        Uploader une image de fond
                      </button>
                      <input id="input-upload-bg" type="file" accept="image/*" class="d-none">
                    </div>

                    <div class="img-background border rounded p-3"
                        style="min-height:240px; background-size:cover; background-position:center; {% if presentation.background is not null %}background-image: url('{{asset('uploads/projets/presentations/' ~ presentation.background )}}'); {% endif %}">
                      {# Option 1: background-image via CSS (défaut) #}
                      {# Option 2: si tu préfères un <img>, dé-commente :
                      <img class="img-fluid d-none" alt="Aperçu" />
                      #}
                    </div>

                    <h4>Formules</h4>
                  </div>
                </div>

                <div class="card">
                  <div class="card-body">
                    <div class="text-end">
                      <button id="save-presentation" class="btn btn-primary">Enregistrer</button>
                    </div>
                  </div>
                </div>
            </div>

            
          </div>
        </div>
      </div>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="{{ asset('assets/js/projet/presentation.js') }}"></script>
<script>
const projetId = '{{projet.idtoken}}';
</script>


{% include 'partials/footer.html.twig' %}