<!DOCTYPE html>
<html>
<head>
    {% load static %}
    <meta http-equiv="refresh" content="1">
    <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;
        }
        body {
            margin: 0px;
            border: none;
        }
        table {
            width: 100%;
            height: 100%; 
            overflow: scroll;
            text-align: center;
        }
        table th {
            padding: 10px;
        }
        table thead {
            border-bottom: solid 2px #ccc500;
            color: black;
        }
        table td {
            padding: 10px;
            border-bottom: solid 1px grey;
        }
        .emptiness {
            display: flex;
            height: 100vh;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
  </style>
</head>
<body>
    {%if activity%}
    <table cellspacing="0" id="myTable">
        <thead><th>Student</th><th>Is Fullscreen</th><th>Questions Attempted</th><th>Status</th></thead>
        <tbody>
        
        {%for user, value in activity.items%}
            {%if value.1 == "false" %} 
                <tr style="background-color: #ff8a5c;color:white">
            {%else%}
                <tr>
            {%endif%}
                <td>{{ user }}</td> 
                <td>{{ value.1 }}</td>
                <td>{{ value.0 }}</td> 
                <td>
                    <span id="seen_{{forloop.counter0}}"></span>
                    <script>
                        "use strict";
                        var datet = new Date({{ value.2|safe }});
                        var timet = datet.getTime();
                        var now = new Date().getTime();
                        var distance =  now - timet;
                        var status = "Offline";
                        if(distance < 5000) {
                            status = "Online"
                        }
                        var x = document.getElementById("seen_{{forloop.counter0}}");
                        x.innerHTML = status; 
                    </script>
                </td>
            </tr>
        {%endfor%}
        </tbody>
    </table>
    {%else%}
        <div class="emptiness">
            <img src="{% static 'img/students.svg' %}" height="100px">
            <h3>No students are currently attempting this quiz.</h3>
        </div>
    {%endif%}
    <script>
    </script>
</body>
</html>