{% extends 'base.html' %}

{% block content %}
<div class="">
    <h2>Exam / Results checker</h2>
    <p>Please enter your CID (Candidate ID) and passcode</p>
    <table>
    <tr><td>CID:</td><td><input type="text" name="cid" id="cid-box" autofocus placeholder="Please enter your CID number"></td></tr>
    <tr><td>Passcode:</td><td><input id="passcode-box" type="text" placeholder="Please enter your passcode"></td></tr>
    </table>
    <button id="cid-selector-go-button">Login</button>
</div>
<details>
<summary>What is my CID?</summary>
<p>Users are allocated a unique CID (and passcode) to track responses. These are unique to the user.</p>
If you do not have your CID details you can request them by entering the email you signed up with below.
<form>
<input type="text" name="email" id="email-box"><br/>
<button id="email-cid-details-button" hx-post="request_cid_details/" hx-swap="outerHTML">Email details</button>
</form>
</details>
<script>
    $(document).ready(function () {
        window.location.search.substr(1).split("&").forEach((item) =>
            {
                s = item.split("=");
                if (s[0] == "cid") {
                    $("#cid-box").val(s[1]);

                }
                if (s[0] == "passcode") {
                    $("#passcode-box").val(s[1]);
                }
            });

        $("#cid-box, #passcode-box").keypress(function(e) {
            // Enter pressed?
            console.log(e)
            if(e.which == 10 || e.which == 13) {
                $("#cid-selector-go-button").click();
            }
        });

        $("#cid-selector-go-button").click(() => {
            cid = document.getElementById("cid-box").value;
            passcode = document.getElementById("passcode-box").value;
            window.location = window.location.href.split('?')[0] + cid + "/" + passcode;
        })
    })
</script>
{% endblock %}
