<!doctype html>
<html lang="en">

<head>
    <%- include("template/head.ejs")%>
    <link rel="stylesheet" type="text/css" href="/css/crearproyectos.css" />
    <link rel="stylesheet" type="text/css" href="/css/creartarjeta.css" />
</head>

<body>
  <!--HEADER CON LA INFO DEL USUARIO-->
    <header class="container-fluid border-bottom border-dark border-1">
        <div class="row d-flex flex-wrap align-items-center">
          <div class="col-lg-2 d-none d-lg-block float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto;" src="/img/ProyectoAlbaRemove.png"></div>
          <div class="col-md-3 col-sm-3 col-4 d-lg-none float-start align-items-center text-center px-0 py-0 "><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto;" src="/img/guest.png"><a id="botonusuario" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuario.nombre%></a></div>
          <div class="col-8 text-center align-self-center float-none ">
            <h1>Proyecto Alba</h1>
            <h4>Learning Environment</h4>
          </div>
          <div class="col-2 d-none d-md-none d-lg-block float-start text-center p-0"><img class="bd-placeholder-img bd-placeholder-img-lg featurette image
            img-fluid mx-auto pt-lg-1;" src="/img/guest.png"><a id="botonusuario2" href="/perfil" class="nombreperfil fw-bold text-dark text-decoration-none m-lg-4 m-xl-4 fs-4" ><%=usuario.nombre%></a></div>
        </div>
      </header>
    <main class="container-fluid p-0 mb-0">

        <%- include("template/navleft.ejs")%>


        <div class="float-start ms-0 row justify-content-center col-8 col-lg-8 col-md-9 col-sm-9 text-center">

          <div class="h-100 m-3 col-11 float-none col-center border border-dark border-2 overflow-hidden" style=" background-color:#eee8cd;">
                <div class=" row border border-dark border-end-0 border-top-0 border-start-0">
                    <div class="col-center pt-4 pb-md-3 pb-sm-3 pb-3 pb-lg-3">
                        <span class="fs-5 fw-bold">Ejercicio de Tarjetas de Memoria</span>
                    </div>

                </div>
                <div class=" row border border-dark border-end-0 border-top-0 border-start-0">
                  <div class="col-center pt-4 pb-md-3 pb-sm-3 pb-3 pb-lg-3">
                    <div class="col-12 mt-3" >
                      <label>Tema: </label>
                      <input id="textoPerfil" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-info my-2" name="tema"
                          placeholder="Nombre del Tema" value="<%= tarjetas.tema %>" readonly></input>
                      
                          <div class="text-center ">
                            <div class="row">
                              <!--LAS DIEZ TARJETAS CON SU RESPUESTA-->
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta1" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta1 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta1" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-secondary my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta1 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta2" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta2 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta2" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-warning my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta2 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta3" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta3 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta3" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-secondary my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta3 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta4" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta4 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta4" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-warning my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta4 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta5" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta5 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta5" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-secondary my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta5 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta6" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta6 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta6" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-warning my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta6 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta7" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta7 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta7" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-secondary my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta7 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta8" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta8 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta8" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-warning my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta8 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta9" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta9 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta9" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-secondary my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta9 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                              <div class="carta-box col-12 col-xl-3 col-lg-4 col-md-12 col-sm-12 text-center align-content-center justify-content-center col-center ">
                                <div class="carta">    
                                  <div class="cara">
                                    <textarea id="textoPreguntas" name="pregunta10" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-success my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.pregunta10 %>" readonly></textarea>
                                 </div>
                                  
                                  <div class="cara reverso">
                                    <textarea id="textoPreguntas" name="respuesta10" type="text" class="col-12 col-sm-12 col-md-4 col-lg-3 btn btn-warning my-2" style="width:180px; height:250px;"
                                   placeholder="<%= tarjetas.respuesta10 %>" readonly></textarea>
                                  </div>    
                                </div>
                              </div>
                            </div> 
                            
                        </div>   
                      
                      
                  </div>
                  </div>

              </div>
                
                
            <a class="col-12 col-sm-12 col-md-12 col-lg-3 btn btn-success my-2 px-1 my-2" href="/tarjetas">Ir a Tarjetas</a>
            <div>
              <%if (usuario.rol=="Profesor" ){%>
                <button class="btn btn-danger btn-sm" data-id="<%= tarjetas.id %>">
                  Eliminar
              </button>
                <%}%>
              </div>
          </div>
          
        
        </div>




        <%- include("template/navright.ejs")%>




    </main>
    <%- include("template/footer.ejs")%>
    <script>
      //Permite eliminar el ejercicio
const btnEliminar = document.querySelector('.btn-danger')
btnEliminar.addEventListener('click', async () => {
  
    console.log(btnEliminar.dataset.id)
    try {
        
        const data = await fetch(`/tarjetas/${btnEliminar.dataset.id}`, {
            method: 'delete'
        })
        const res = await data.json()
        console.log(res)
        if (res.estado) {
            window.location.href = '/tarjetas'
        } else {
            console.log(res)
        }
    } catch (error) {
        console.log(error)
    }
})
    </script>
</body>

</html>