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

<main class="container">
    <!-- Titulo -->
    <h1 class="header center white-text">Historias de usuario</h1>
    <h6 class="header center white-text">Proyecto: <%= idProyecto %> </h6>
    
    <!-- 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/nuevo-casodeuso/<%= idProyecto %>" id="new_iteracion" class="btn-large waves-effect waves-light green lighten-1">Crear nueva Historia de Usuario</a>
        <br><br>
        <a href="/proyectos" class="waves-effect waves-light red btn" style="width:14rem;"><i class="material-icons left">undo</i>Regresar</a>
    </div>
    
      <!-- Generar proyectos almacenados con tarjetas -->
    <div class="input-field col s12">
    </div>  
    
    <div class="row" id="resultados">
            
            <!-- Card creation -->
            <% for (let caso of lista_historias) { %>
                <div class="col s12 m4 l3">
                    <div class="card medium grey darken-4">
                        
                        <div class="card-image waves-effect waves-block waves-light">
                            <img class="activator" src="/images/clock.jpg">
                        </div>
                        
                        <div class="card-content">
                        <span class="card-title activator grey-text text-lighten-3">Historia de usuario <%= caso.idHistoria %>   
                            
                            <div class="center card-action">
                            
                              <!-- Dropdown Trigger -->
                                <a class='dropdown-trigger btn' href='#' data-target='<%= caso.idHistoria %>' style="width: 90%;">Acciones</a>

                                <!-- Dropdown Structure -->
                                <ul id='<%= caso.idHistoria %>' class='dropdown-content black'>
                                    <li><a class="white-text" href="/casodeuso/modificar-casodeuso/<%= caso.idHistoria %>/<%= caso.idProyecto %>"><i class="material-icons">edit</i>Editar Historia</a></li>
                                    <li><a class="white-text" href="/reporte/elegir-tareas/<%= caso.idProyecto %>/<%= caso.idHistoria %>"><i class="material-icons">assignment</i>Elegir Tareas</a></li>
                                    <li><a class="white-text" href="/reporte/ver-reporte/<%= caso.idProyecto %>/<%= caso.idHistoria %>"><i class="material-icons">summarize</i>Ver Reporte</a></li>
                                    <li class="divider" tabindex="-1"></li>
                                
                                    <li>
                                        <form action="/casodeuso/eliminarHistoria/<%= idProyecto %>" method="POST" id="eliminar_<%= caso.idHistoria %>">
                                        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                        <input type="hidden" name="idHistoria" value="<%= caso.idHistoria %>">
                                        <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_<%= caso.idHistoria   %>").addEventListener('submit', (e) => {
                                             let confirmacion = confirm('¿Estás seguro de eliminar la Historia de Usuario??');
                                             if(!confirmacion){
                                               e.preventDefault();
                                             }  
                                           });
                                        </script>
                                        </form>  
                                    </li>

                                </ul>

                            </div>   
                        </div>

                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">Historia de usuario <%= caso.idHistoria %><i class="material-icons right">close</i></span>
                            <br>
                            <strong>Yo como:</strong> <%= caso.yo_como %><br><br>
                            <strong>Quiero:</strong> <%= caso.quiero %><br><br>
                            <strong>Para:</strong> <%= caso.para %><br><br>
                            <strong>AP:</strong> <%= caso.AP %><br><br>
                            <strong>Comentario:</strong> <%= caso.comentario %><br>
                        </div>

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


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