<!DOCTYPE html>
<html>
<head>
  {% load static %}
  <title>Pariksha | Monitor Quiz</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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">
  <style>
        * {
            font-family: 'Source Sans Pro', sans-serif;
        }
        .quizlist {
            max-width: 800px;
            margin: auto;   
        }
        iframe {
            width: 100%;
            height: 500px;
            overflow: scroll;
            border: solid 2px #ccc500;
            border-radius: 6px;
        }
        .control_group {
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            border-radius:6px;
            border: solid 2px #ccc500;
        }
        .control_group > button {
            height: 50px;
            align-self: center;
        }
        #quiz_selector {
            width: 100%;
            font-size: 1.2em;
            padding-left: 10px;
            border: none;
        }
        #quiz_selector > option {
            padding: 10px;
        }
        .switchbtn {
            width: 200px;
            font-size: 1em;
            font-weight: bold;
            color: white;
            background-color: #ccc500;
            border: none;
        }
        .logbtn {
            width: 200px;
            height: 50px;
            font-size: 1em;
            border-radius:6px;
            font-weight: bold;
            color: white;
            background-color: #3F51B5;
            border: none;
        }
  </style>
</head>
<body>
    <section class="quizlist">
            <h2>Change quiz:</h2>
            <div class="control_group">
                <select id="quiz_selector">
                    {%for q in all%}
                        {%if q.quizCode == quiz.quizCode%}
                            <option value="{{q.quizId}}" selected>{{q.quizCode}} | {{q.quizInfo}}</option>
                        {%else%}
                            <option value="{{q.quizId}}">{{q.quizCode}} | {{q.quizInfo}}</option>
                        {%endif%}
                    {%endfor%}
                </select>
                <button type="button" class="switchbtn" onclick="switch_quiz()">Change Quiz</button>
            </div>
            <br/>
            <br/>
            <h2>Currently monitoring quiz: {{quiz.quizInfo}}</h2>
            <tr><td colspan=2><iframe src="/getbeat/?quiz={{ quiz.quizId }}"></iframe></td></tr>
            <a href="/logs/?quiz={{quiz.quizId}}" target="_blank"><button type="button" class="logbtn">View Logs</button></a>
    </section>
    <script>
        function switch_quiz () {
            var selector = document.getElementById("quiz_selector");
            window.location.replace('/monitor/?quiz='+selector.value);
        }
    </script>
</body>
</html>