{% extends 'atlas/base.html' %}

{% block content %}
    <h2>Start: {{collection.name}}{% if cid_exam.completed %} <span class="stamp-white">REVIEW</span>{% endif %}</h2>

    {% if request.user.is_authenticated and valid_user %}
        User: {{request.user}}<br/>


        {% if cid_exam %}
            Started: {{cid_exam.start_time}} <br/>


            {% if cid_exam.completed %}
                Ended: {{cid_exam.end_time}} <br/>
            {% endif %}
        {% endif %}

        <a href="{% url 'atlas:collection_case_view_take_user' pk=collection.pk case_number=0 %}">
            {% if cid_exam.completed %}
                <button>Review</button>
            {% else %}
                <button>Start</button>
            {% endif %}
        </a>
            {% if cid_exam.completed %}
                <a href="{% url 'atlas:collection_take_overview_user' pk=collection.pk %}"><button>Overview</button></a>
            {% endif %}
    {% else %}
        Enter your CID and passcode in the below boxes. (Registered user should login <a href="{% url 'login' %}?next={% url 'atlas:collection_take_start' pk=collection.pk %}">here</a>)<br />
        <p><input id="cid-box" type="text" value="Candidate ID"></p>
        <p><input id="passcode-box" type="text" value="Passcode"></p>

        <button>Start</button>

        <script type="text/javascript">
            $(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) {
                        $("button").click();
                    }
                });

                $("button").click(() => {
                    let cid = $("#cid-box").val();
                    let passcode = $("#passcode-box").val();

                    if (Number.isInteger(parseInt(cid))) {
                        window.location.replace("{% url 'atlas:collection_case_view_take' pk=collection.pk case_number=0 cid='0000000' passcode='ZZZZZZ' %}".replace("0000000", cid).replace("ZZZZZZ", passcode));
                    } else {
                        alert("Please enter a valid Candidate ID (CID).")
                    }
                });
            });
        </script>
    {% endif %}

{% endblock %}