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

{% block content %}

      <div
        class="body-wrapper"
        id="page-projet-root"
        data-import-pending="{{ projet.import ? '0' : '1' }}"
        data-projet-id="{{ projet.idtoken }}"
        data-controller="presentation-list"
        data-presentation-list-update-url-value="{{ path('presentation_update_titre') }}"
      >
        <div class="container-fluid">

          <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
            <div>
              <h2 class="mb-1 fw-bold">Présentations du projet</h2>
              <p class="text-muted mb-0">Créez des pages de présentation de votre projet et diffusez la à vos prospects</p>
            </div>
          </div>

          <div class="card">
            <div class="card-body">
              <div class="row">

                <div class="row el-element-overlay">
                  {% for presentation in projet.projetPresentations %}
                    {% if not presentation.deleted %}
                      <div class="col-md-3">
                        <div class="card overflow-hidden">
                          
                            <div class="el-card-item pb-3">
                              <div class="height250 
                                  el-card-avatar
                                  mb-3
                                  el-overlay-1
                                  w-100
                                  overflow-hidden 
                                  position-relative
                                  text-center
                                ">
                                  <div id="star{{presentation.idtoken}}" class="star position-absolute top-0 end-0 p-2" style="z-index: 25; {% if projet.presentation is defined and presentation != projet.presentation %}display: none;{% endif %} ">
                                        <span class="mb-1 badge text-bg-dark"><i class="ti ti-star fs-4"></i> Active</span>
                                    </div>
                                    
                                  {% if projet.affiche is not null %}
                                    <img src="{{asset('uploads/projets/logos/' ~ projet.affiche)}}" class="d-block position-relative w-100">
                                  {% endif %}

                                  <div class="el-overlay w-100 overflow-hidden">
                                      <ul class="list-style-none el-info text-white text-uppercase d-inline-block p-0">
                                          <li class="el-item d-inline-block my-0 mx-1">
                                              <a class="btn default btn-outline el-link text-white border-white"
                                                href="{{path('projet_view_presentation_view', {'id' : projet.idtoken, 'presentationid' : presentation.idtoken})}}"
                                              >
                                                  <i class="ti ti-search"></i>
                                              </a>
                                          </li>
                                          <li class="el-item d-inline-block my-0 mx-1">
                                              <a class="btn default btn-outline el-link text-white border-white"
                                                data-action="presentation-list#favorite"
                                                data-presentation-id="{{ presentation.idtoken }}"
                                                data-favorite-url="{{ path('presentation_favorite', { presentation: presentation.idtoken, projet: projet.idtoken }) }}">
                                                  <i class="ti ti-star"></i>
                                              </a>
                                          </li>
                                      </ul>
                                  </div>

                              </div>
                              <div class="el-card-content text-center">
                                  <div class="comment-text w-100">
                                    <div class="comment-footer mt-2">
                                      <turbo-frame
                                        id="presentation-title-{{ presentation.idtoken }}"
                                        src="{{ path('projet_presentation_title_frame', { id: projet.idtoken, presentationid: presentation.idtoken }) }}"
                                      >
                                        Chargement...
                                      </turbo-frame>
                                    </div>
                                  </div>
                              </div>
                            </div>
                          
                        </div>
                      </div>
                    {% endif %}
                  {% endfor %}

                    <div class="col-md-3">
                      <div class="card overflow-hidden">
                        <a href="{{ path('projetpresentation_add', { id: projet.idtoken }) }}">
                          <div class="el-card-item pb-3">
                            <div class="height250 
                                el-card-avatar
                                mb-3
                                el-overlay-1
                                w-100
                                overflow-hidden
                                position-relative
                                text-center
                              ">
                                <img src="{{asset('assets/images/plus.png')}}" class="d-block position-relative w-100">
                            </div>
                            <div class="el-card-content text-center">
                              <h4 class="mb-0 card-title">Nouvelle présentation</h4>
                            </div>
                          </div>
                        </a>
                      </div>
                    </div>

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

{% endblock %}