<%- include('partials/html-start.ejs') %>
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

<header>
    <div class="header">
      <img src="./partials/logos (3)/Ubiquiz_transparent.png" alt="Logo Image" class="logo">
      <p class="header-text">Nocturnal Learning</p>
      <div class="header-right">
        
        <a href="/login">Login</a>
        <a href="/register">Register</a>
    </div>
    </div>
    </header>


    <div class="container" id="modal">
       
        <button onclick="document.getElementById('id01').style.display='block'" class="button black">Add a new quiz question!</button>
      
        <div id="id01" class="modal">
          <div class="modal-content">
            <div class="container">
              <span onclick="document.getElementById('id01').style.display='none'" class="button display-topright">&times;</span>
              
              <div class ="add_hotel">
              <form method="POST" action="/addQuiz">
                  <label for="name">Course Title</label>
                  <input name="question" placeholder="Please enter a title of a course">
                  <br><br>
                  <label for="room_type">Description</label>
                  <input name="answer" placeholder="add a brief descrption..">
                  <br><br>
                  <label for="name">Question</label>
                  <input name="question" placeholder="...">
                  <br><br>
                  <label for="name">Answer</label>
                  <input name="question" placeholder="...">
                  <br><br>
                  <button type="submit">ADD</button>
                  </form>
                  </div>
              <br><br>
              
            </div>
          </div>
        </div>
      </div>


<h4><%= quizData.length %> Collections</h4>
<div class="categories">
  <div class="criteria">
    <span>Questions</span>
    <span>Answers</span>
  </div>
</div>

<% for (var i=0; i < quizData.length; i++) { %>
<!-- start of question cards-->
    <div class="container" id="flashcards">
        <div class="flip-card">
          <div class="flip-card-inner">
            <div class="flip-card-front">
        <form method="POST" action="/updateQuiz">
            <input type="hidden" name="id" value="<%= quizData[i]._id %>">
             <input type="text" name="name" value="<%= quizData[i].question %>">
           <!--  -->
           <div class="card-footer">
           <button type="submit" id="submit">Update</button>
        </div>
     
        <form method="POST" action="/deleteQuiz">
            <input type="hidden" name="id" value="<%= quizData[i]._id %>">
            <div class="card-footer">
            <button type="submit" id="delete" >Delete</button>
              </div>
          </form>
        </div>
            <div class="flip-card-back">

            <input type="text" name="room_type" value="<%= quizData[i].answer %>">
           
            <button type="submit" id="submit">Update</button>
        </form>
     
        <form method="POST" action="/deleteQuiz">
            <input type="hidden" name="id" value="<%= quizData[i]._id %>">
            <button type="submit" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Delete</button>
        </form>
        
    </div>
        </div>
    </div>
    <!-- end -->

<% } %>

<footer> Connected from my Mongodb ðŸ“Ÿ
    <a href="/send">send </a> |
    <a href="https://github.com/Jean-alien/maple-leaves-quebec" target="_blank"> Source Repo</a>
</footer>

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