<style>

  .questionLabel{
      padding: 0;
      list-style: none;
    }

  .welcome{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .welcome__image{
    height: 100%;
    width: 65%;
    background-image: url("../2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .welcome__image--blur{
    width: 100%;
    height: 100%;
    background-color: rgba(50, 101, 212, 0.603);
  }

  .welcome__login{
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  form{
    overflow: scroll;
  }

  button, a{
    width: 300px;
  }

  @media (max-width: 1024px) {
    .welcome__image{
    width: 50%;
    background-position:right;
  }
  .welcome__login{
    width: 50%;
    
    }
  }

  @media (max-width: 650px) {
    .welcome__image{
    width: 0%;
    background-image: none;
  }
  .welcome__login{
    width: 100%;
    }
  }
    
</style>

<div class="welcome">
  <div class="welcome__image">
    <div class="welcome__image--blur"></div>
  </div>
  <div class="welcome__login">
    <h1 class="mt-4">Create Survey</h1>
    <p class="lead mb-3"><%= user %> will now create new poll</p>
    <%- include('partials/messages'); %>
    <form action="/surveys/createSurvey" method="POST">
      <div class="form-group">
        <label for="topic">Topic</label>
        <input
          type="text"
          id="topic"
          name="topic"
          class="form-control"
          placeholder="Enter Topic for Poll"
          value="<%= typeof topic != 'undefined' ? topic : '' %>"
        />
      </div>
      <div class="form-group mt-2">
      <label for="description">Description</label>
        <input
          type="text"
          id="description"
          name="description"
          class="form-control"
          placeholder="Enter description for poll"
          value="<%= typeof description != 'undefined' ? description : '' %>"
        ></input>
      </div>
      <div class="form-group mt-2 ">
        <label for="questions" >Questions</label>
        <ul class="questionLabel"></ul>
      </div>
      <a class="addBtn btn btn-primary btn-block">Add question</a>
      <div class="d-grid gap-2 mt-3">
        <button type="submit" class="btn btn-outline-primary btn-block">Create Survey</button>
      </div>
    </form>
    <div class="mt-3 mb-2">
      <a href="/dashboard" class="btn btn-secondary">Back</a>
    </div>
  </div>
</div>


  <script>
      const addBtn = document.querySelector(".addBtn");
      const questionLabel = document.querySelector('.questionLabel')

      const newQuestion = () => {
          const newLi = document.createElement('li');
          const newInput = document.createElement('input');
          const delBtn = document.createElement('a');

          newInput.classList.add("form-control")
          newLi.classList.add("mt-3")
          newInput.setAttribute('placeholder', "Enter Question")
          newInput.setAttribute('name', "question")

          delBtn.classList.add("deleteBtn")
          delBtn.classList.add("btn")
          delBtn.classList.add("btn-danger")
          delBtn.innerText = "Delete Question"

          newLi.append(newInput);
          newLi.append(delBtn)
          questionLabel.append(newLi)       
      }

    const deleteQuestion = (e) => {
    if(e.target.closest("a")){
            e.target.closest("li").remove();
        }   
    }  

    addBtn.addEventListener('click', newQuestion);
    questionLabel.addEventListener('click', deleteQuestion)
      
  </script>