{% extends exam.app_name|add:'/exams.html' %}

{% block content %}
    <div id="stats-plot">{{plot|safe}}</div>
    <div class="">
        <h2>{{ exam.name }}</h2>
        {% if cached_scores %}
            User answer scores are cached, if you update or change an answer you will need to <a href="{% url exam.app_name|add:':exam_scores_refresh' exam.pk %}">refresh the scores</a>.
        {% endif %}

        {% if missing_cids %}
            <div class="alert alert-warning" role="alert">
                The following CIDs results have not been submitted:
                {% for cid in missing_cids %}
                    {{cid}},
                {% endfor %}
            </div>
        {% endif %}
        {% if missing_users %}
            <div class="alert alert-warning" role="alert">
                The following users results have not been submitted:
                {% for user_id in missing_users %}
                    {{user_id}},
                {% endfor %}
            </div>
        {% endif %}
        {% if unmarked %}
            <div class="alert alert-warning" role="alert">
                The following questions need marking
                {% for exam_index in unmarked %}
                    <a href="{% url exam.app_name|add:':mark' exam.pk exam_index %}">{{ exam_index|add:1 }}</a>
                {% endfor %}
            </div>
        {% endif %}

    </div>
    <div id="stats-block">
        <h3>Stats</h3>
        Candidates: {{cids|length}}<br />
        Questions: <span id="question-number">{{question_number}}</span><br />
        Available marks: {{max_score}}<br />
        Mean: {{mean}}, Median {{median}}, Mode {{mode}}

    </div>
    <div>
        <table class="table table-dark table-striped table-hover table-sm cid-score-table">
            <tr>
                <th>Candidate ID</th>
                <th>Score</th>
                <th>Normalised Score</th>
            </tr>
            {% for cid in cids %}
                <tr class="candidate-row" data-answer-count={{user_answer_count|get_item:cid}}>
                    {% if cid|slice:":1" == "u" %}
                        <td>{{cids_user_id_map|get_item:cid}}</td>
                    {% else %}
                        <td><a href="{% url 'cid_scores_admin' cid|slice:'2:' %}">{{cid}}</a></td>
                    {% endif %}
                    <td>{{user_scores|get_item:cid}}</td>
                    <td>{{user_scores_normalised|get_item:cid}}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
    <div>
        <h3>Answers as a table</h3>
        <table class="table table-dark table-striped table-hover table-sm col-sm">
            <thead class="thead-dark">
                <tr>
                    <th>Candidate</th>
                    {% for cid in cids %}
                        {% comment %} <th><a href="{% url exam.app_name|add:':exam_scores_cid_user' exam.pk cid %}">{{cid}}</a></th> {% endcomment %}
                        <th><a href="">{{cids_user_id_map|get_item:cid}}</a></th>
                    {% endfor %}

                </tr>
            </thead>
            {% block table_answers %}
            {% endblock table_answers %}
            {% comment %} {% for question in questions %}
                <tr>
                    <td><a href="{% url exam.app_name|add:':mark' exam_pk=exam.pk sk=forloop.counter0 %}">Question {{forloop.counter}}</a>
                        {% if question.normal %}
                            [N]
                        {% else %}
                            [A]
                        {% endif %}
                    </td>
                    {% for cid in cids %}
                        {% with by_question|get_item:question|get_item:cid as ans_score %}
                            <td class="user-answer-score-{{ans_score.1}}" title="answer score: {{ans_score.1}} [{{ans_score.2}}]">{{ans_score.0}}</td>
                        {% endwith %}
                    {% endfor %}
                </tr>
            {% endfor %} {% endcomment %}
            <tr>
                <td>Score:</td>
                {% for cid in cids %}
                    <td>{{user_scores|get_item:cid}}</td>
                {% endfor %}
            </tr>
        </table>

        {% block breakdown %}{% endblock breakdown %}

        <details>
            <summary>Email results</summary>
            User results emailed: {{exam.exam_results_emailed|default:"Never"}}<br/>
            <button id="email-results-button"
                title="Email results to users and their supervisor"
                hx-get="{% url exam.app_name|add:':exam_report_email' exam_id=exam.pk %}"
                hx-target="#user-details"
                hx-confirm="This will email results, please make sure scores have been refreshed before continuing"
                hx-prompt="Please enter an additional email to send to (user and supervisor will automatically be used if available) if required"
            >Email user results</button>
            <button id="email-unsent-results-button" title="Email results to users and their supervisor"
                hx-get="{% url exam.app_name|add:':exam_report_email_unsent' exam_id=exam.pk %}"
                hx-target="#user-details"
                hx-confirm="This will email results, please make sure scores have been refreshed before continuing"
                hx-prompt="Please enter an additional email to send to (user and supervisor will automatically be used if available) if required"
            >Email unsent user results</button>
            <button id="email-results-check-button" title="Check the status of emailed results"
                hx-get="{% url exam.app_name|add:':exam_report_email_status' exam_id=exam.pk %}"
                hx-target="#user-details">Check email status</button>
            <p>Note: currently only works with registered users</p>
            <div id="user-details"></div>
        </details>

    </div>
{% endblock %}


{% block js %}
    <script>
        $(document).ready(() => {
            let question_number = document.getElementById("question-number").text;
                $(".candidate-row").each((index, el) => {
            console.log(index, el)
            if (el.dataset.answerCount != question_number) {
                $(el).addClass("missing-answers")
            }
        });


    });

    </script>
    <style>
        .missing-answers td:first-child:before {
            content: "*";
            color: red;
        }
    </style>

{% endblock %}