<!DOCTYPE html>
<head>
  {% load static %}
  <title>Pariksha | ALL Quizzes</title>
  <link rel="shortcut icon" href="{% static 'img/favicon.svg' %}" />
  <script>
    function start_quiz(x) {
        window.open("/quiz/?q="+x, "_blank", "fullscreen=yes");
    }
</script>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="{% static 'assets/DataTables/datatables.min.css' %}"/>
  <script type="text/javascript" src="{% static 'assets/DataTables/datatables.min.js' %}"></script>
  <style>
    * {
        font-family: 'Source Sans Pro', sans-serif;
    }
    .table_wrapper {
      margin: 40px;
      animation: appear 1s 1;
      position: relative;
    }
    .action_btn {
      color: white;
      background-color: #1779BA;
      cursor: pointer;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      border-radius: 6px;
    }
            
      @keyframes appear {
        0% {
          opacity: 0;
          top: 50px;
        }
        100% {
          opacity: 1;
          top:0px;
        }
      }
      
      .emptiness {
            display: flex;
            height: 100vh;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .heading {
          width: 400px;
          margin: 50px auto;
          font-weight: bold;
        }
    </style>
</head>
<body>
  {%if quizId%}
  <h1 class="heading">ALL Quizzes</h1>
  <section class="table_wrapper">
  <table cellspacing="0" id="myTable">
      <thead><th>Code</th><th>Quiz Name</th><th>Organized By</th><th>Date</th><th>Time</th><th>Duration</th><th>Status</th><th>Attempt quiz</th></thead>
      <tbody>
      
        {%for quiz in quizId%}
          <tr>
            <td>{{quiz.quizCode}}</td><td>{{quiz.quizInfo}}</td><td>{{quiz.quizInstructor}}</td><td>{{quiz.date}}</td><td>{{quiz.startTime}}</td><td>{{quiz.length}} minutes</td><td>{{quiz.status}}</td><td>{%if quiz.status == "Ended" %} - {%else%}<button onclick="start_quiz({{quiz.quizId}})" class="action_btn" type="button">Start Quiz</button>{%endif%}</td>
          </tr>
        {%endfor%}
      </tbody>
  </table>
  </section>
  {%else%}
      <div class="emptiness">
        <img src="{% static 'img/students.svg' %}" height="100px">
        <h3>You have not attempted any quiz.</h3>
    </div>
  {%endif%}
  <script>
    function test() {
      alert(1);
    }
    
    $(document).ready( function () {
            $('#myTable').DataTable({
                /* Disable initial sort */
                "aaSorting": []
            });
        } );
  </script>
</body>
</html>
