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

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

<body>
  <%- include("template/header.ejs")%>
  <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;max-height: 2200px; min-height: 1200px">
        <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">Crear Cantar Tema</span>
          </div>

        </div>
        <form action="/cantar/crearcantar" class= "needs-validation formulario" method="POST">
          <!--Se incluye el nombre del area-->
        <div class="col-12 mt-3" style="max-height: 2100px;">
          <div>
          <input id="textoPreguntas" name="area" type="text" class="col-12 col-sm-12 col-md-8 col-lg-9 btn btn-info my-2"
            placeholder="Nombre del Tema"></input>

          </div>
          <div class="contenido">
          <div>
            <!--Se incluye el tema que se genera-->
           <input id="textoPreguntas" name="tema" type="text"
                class="col-12 col-sm-12 col-md-12 col-lg-12 btn btn-success my-2"
                placeholder="Escribir Tema"></input>
              </div>
              
             </div>          
              
        </div>
        
          <a class="col-12 col-sm-12 col-md-12 col-lg-4 btn btn-success my-2" href="/cantar" id="volveriniciarsesion">Ir a Temas Cantados</a>
          
          <button class="col-12 col-sm-12 col-md-12 col-lg-3 btn btn-success my-2 px-1 my-2" type="submit">Crear</button>
        
      </form>
      <button class="col-12 col-sm-12 col-md-12 col-lg-3 btn btn-success my-2 aniadir">Añadir Pregunta</button>
      </div>
      

    </div>




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




  </main>
  <!--Permitirá incluir nuevos temas para cantar-->
  <script>
    contador=1
    
      $(".aniadir").click(function () {
      if (contador<25){
        contador++;
        console.log(contador)
        $(".contenido").append("<div><input id=\"textoPreguntas\" name=\"tema\" type=\"text\"class=\"col-12 col-sm-12 col-md-12 col-lg-12 btn btn-success my-2\" placeholder=\"Escribir Tema\"></input></div>");
      }else{
        console.log("I CANT")
      }
      })
      
  </script>
</body>

</html>