{% extends 'rapids/exams.html' %}

{% block content %}
    <div class="col-md-6" id="main-col">
        <h2>{% if review %}Reviewing{% else %}Marking{% endif %} question {{question_details.current}} of {{question_details.total}}</h2>
        <a href="{% url 'rapids:question_detail' question.id %}" title="View the Question">View</a> <a
            href="{% url 'rapids:rapid_update' question.id %}" title="Edit the Question">Edit</a> <a
                href="{% url 'admin:rapids_rapid_change' question.id %}" title="Edit the Question using the admin interface">Admin
                Edit</a>
        {% if unmarked_answers_bool %}
            <div class="alert alert-warning" role="alert">
                This questions has unmarked answers. Are you sure you want to review?
            </div>
        {% endif %}

        {% if question.normal %}
            <h3>This question is normal</h3>
            Answers will be automatically marked.<br />

            {% if incorrect_answers %}
                <p>The following answers have been submitted for this question</p>
                <div class="marking-list">
                    <ul id="new-answer-list" class="answer-list rapid">
                        {% for answer in incorrect_answers %}
                            <li>
                                <pre><span class="answer incorrect" title="{{answer}}">{{ answer }}</span></pre>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        {% else %}
            <h3>This question is abnormal</h3>
            Answers given as normal will be automatically marked.<br />
            Region: {{ question.get_regions }}, Abnormalities: {{ question.get_abnormalities }}<br />
            [{{question.get_primary_answer}}]
        {% endif %}
        <div class="marking">
            <form method="POST" class="post-form">{% csrf_token %}
                {% if not question.normal %}
                    Click each answer to toggle through marks awarded (as per colour)<br/>
                    {% if not review %}
                        {% if unmarked_exam_answers_only %}
                            Showing unmarked exam answers only <a href="{% url 'rapids:mark_all' exam.id question_number %}">(view all answers for question)</a>
                        {% else %}
                            Showing all answers <a href="{% url 'rapids:mark' exam.id question_number %}">(view unmarked exam answers only)</a>
                        {% endif %}
                    {% endif %}

                    <div class="marking-list">
                        {% if not review %}
                            Unmarked:
                            <ul id="new-answer-list" class="answer-list rapid">
                                {% for answer in user_answers %}
                                    <li>
                                        <pre><span class="answer not-marked">{{ answer }}</span></pre>
                                    </li>
                                {% endfor %}
                            </ul>

                            {% if not unmarked_exam_answers_only %}
                                Marked:
                                <ul id="marked-answer-list" class="answer-list rapid">
                                    {% for answer in correct_answers %}
                                        <li>
                                            <pre><span class="answer correct" title="{{answer}}">{{ answer }}</span></pre>
                                        </li>
                                    {% endfor %}
                                    {% for answer in half_mark_answers %}
                                        <li>
                                            <pre><span class="answer half-correct" title="{{answer}}">{{ answer }}</span></pre>
                                        </li>
                                    {% endfor %}
                                    {% for answer in incorrect_answers %}
                                        <li>
                                            <pre><span class="answer incorrect" title="{{answer}}">{{ answer }}</span></pre>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        {% else %}
                            To review:
                            <ul id="new-answer-list" class="answer-list rapid">
                                {% for answer, mark in review_user_answers %}
                                    <li>
                                        <pre><span class="answer not-marked" data-mark="{{mark}}">{{ answer }}</span></pre>
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                        <div class="answer-list key">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1
                            Mark</span>, <span class="incorrect">0 Marks</span></div>
                    </div>
                {% endif %}
                {% if review and not question.normal %}
                    <button type="button" name="check-review" class="check-review">Check review answers</button><br/>
                {% endif %}
                <span class="save-buttons">
                    {% if question_details.current > 1 %}
                        <button type="submit" name="previous" class="save btn btn-default">Previous</button>
                    {% endif %}
                    <button type="submit" name="save" class="save btn btn-default">Save</button>
                    {% if question_details.current >= question_details.total %}
                    {% else %}
                        <button type="submit" name="next" class="save btn btn-default">Next</button>
                        <button type="submit" name="skip" class="save btn btn-default">Skip</button>
                    {% endif %}
                </span>
                <span class=hide>
                    {{ form.as_p }}
                </span>
            </form>
        </div>
        <button class="btn btn-primary" type="button" id="toggle-images">Toggle images</button>
    </div>
    <div class="col-md-6" id="dicom-col">
        <div id="single-dicom-viewer" class="marking-dicom" data-images="{{question.get_image_url_array}}"
            data-annotations='{{question.get_image_annotations}}'>
        </div>
    </div>
        <script>
            $(document).ready(() => {
                {% if review and not question.normal %}
                $("button.check-review").click(() =>{
                    $(".marking-list .answer").each((n, el) => {
                        console.log(n, el, el.dataset);
                        if (el.dataset.mark != el.dataset.newmark) {
                            $(el).after(`<span class="current-mark"> saved [${el.dataset.mark}]</span>`)
                        }
                    })
                    $("button.check-review").after("Discreptant answers are show above. Clickinc next / save will overwrite saved scores with your current scoring.").hide()
                    $(".save-buttons").show();
                })

                $(".save-buttons").hide();
                {% endif %}

                $("#toggle-images").click(() => {
                    console.log("111")
                    $("#dicom-col").toggle()
                    $("#main-col").toggleClass("col-md-6")
                    $("#main-col").toggleClass("col-md-12")

                })
            });
        </script>

{% endblock %}