<%- include('partials/head.ejs') %>
<%- include('partials/navbar.ejs') %>
  
  <main class="container">
    <!-- Titulo -->
    <h1 class="header center white-text"><%= titulo %></h1>
    
    <!-- Search bar -->
    <div class="white-text searchbar">
      <input type="hidden" id="_csrf" name="_csrf" value="<%= csrfToken %>">
      
      <div class="input-field">
        <i class="material-icons prefix">search</i>
        <label for="buscar">Buscar un proyecto</label>
        <input class="white-text" type="text" name="buscar" id="buscar" onkeyup="buscar()">

      </div> 

    </div>

    <!-- Para que se vea bonito-->
    <div style="backdrop-filter: blur(10px) contrast(70%); padding:20px; border-radius: 20px; margin-bottom: 6%;">
       <!-- Botón para crear un nuevo proyecto-->
       <div class="row center">
        <a href="/proyectos/registrar-proyecto" id="new_project" class="btn-large waves-effect waves-light green"><i class="material-icons left">add</i>Nuevo proyecto</a>
      </div>
    
    <!-- Generar proyectos almacenados con tarjetas -->
    <div class="row" id="resultados">

      <!-- Card creation -->
      <% for (let proyecto of lista_proyecto) { %>
          <div class="col s12 m6 l3">
              <div class="card medium grey darken-4">
                  
                  <div class="card-image waves-effect waves-block waves-light">
                      <img class="activator" src="/images/proyecto.jpg">
                  </div>
                  
                  <div class="card-content">
                  <span class="card-title activator grey-text text-lighten-3">Proyecto: <%= proyecto.nombreProyecto %>   
                      
                    <div class="center card-action">
                      <!-- Dropdown Trigger -->
                      <a class="dropdown-trigger btn" data-target="<%= proyecto.idProyecto %>" style="width: 80%;">Acciones</a>
                    
                      <!-- Dropdown Structure -->
                      <ul id="<%= proyecto.idProyecto %>" class="dropdown-content black">
                          <li><a class="white-text" href="/proyectos/modificar-proyecto/<%= proyecto.idProyecto %>"><i class="material-icons">edit</i>Editar proyecto</a></li>
                          <li><a class="white-text" href="/fases/<%= proyecto.idProyecto %>"><i class="material-icons">grid_view</i>Fases y tareas</a></li>
                          <li><a class="white-text" href="/proyectos/casodeuso/<%= proyecto.idProyecto %>"><i class="material-icons">border_all</i>Historia de Usuario</a></li>  
                          <li class="divider" tabindex="-1"></li>
                      
                          <li>
                            <form action="/proyectos/eliminarProyecto" method="POST" id="eliminar_<%= proyecto.idProyecto %>">
                              <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                              <input type="hidden" name="idProyecto" value="<%= proyecto.idProyecto %>">
                              <button class="transparent" style="border-color: rgba(255, 255, 255, 0);"><li><a type="submit" name="add" class="waves-effect waves-light transparent red-text"><i class="material-icons left">delete</i>Eliminar</a></li></button>
                              <script> 
                                document.getElementById("eliminar_<%= proyecto.idProyecto   %>").addEventListener('submit', (e) => {
                                  let confirmacion = confirm('¿Estás seguro de eliminar el Proyecto?');
                                  if(!confirmacion){
                                    e.preventDefault();  
                                  }  
                                });
                              </script>
                            </form>  
                          </li>
                    
                          </ul>
                        
                    </div>
                  </div>

                  <div class="card-reveal">
                      <span class="card-title grey-text text-darken-4">Proyecto: <%= proyecto.nombreProyecto %><i class="material-icons right">close</i></span>
                      <br>
                      <strong>Proyecto:</strong> <%= proyecto.nombreProyecto %><br><br>
                      <strong>Descripcion:</strong> <%= proyecto.descripcion %><br><br>
                      <strong>Fecha de inicio:</strong> <%= proyecto.fechaPlaneada %><br><br>
                      <strong>Fecha de finalización:</strong> <%= proyecto.fechaEntrega %><br><br>
                  </div>

              </div>
          </div>
      <% } %>

  </div>
      
  </div>

  </main>

  <%- include('partials/footer.ejs') %>

<!-- Script de búsqueda -->  
<script src="/js/buscar.js"></script>