{% extends 'base.html' %}

{% block content %}
CID: {{cid}}
<div class="no-select">
    <h2>{{exam.name}}: Question [{{pos|add:1}}/{{exam_length}}]</h2>
    {% if exam.publish_results %}
    <div class="alert alert-primary" role="alert">
        Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
    </div>
    {% endif %}

    <div>
        <p>{{question.stem|safe}}</p>
    </div>
    <ul class="sba-answer-list">
        <li data-ans="a">{{question.a_answer|safe}}</li>
        <li data-ans="b">{{question.b_answer|safe}}</li>
        <li data-ans="c">{{question.c_answer|safe}}</li>
        <li data-ans="d">{{question.d_answer|safe}}</li>
        <li data-ans="e">{{question.e_answer|safe}}</li>
    </ul>


    <div>

        <form method="POST" class="post-form">{% csrf_token %}
            <div class="form-contents">
                {{form}}
            </div>

            {% if previous > -1 %}
            <button type="submit" name="previous" class="save btn btn-default">Previous</button>
            {% endif %}
            {% if next %}
            <button type="submit" name="next" class="save btn btn-default">Next</button>
            {% else %}
            {% if not exam.publish_results %}
            <button type="submit" name="save" class="save btn btn-default">Save</button>
            {% endif %}
            {% endif %}

            {% if exam.publish_results and question.feedback %}
            <h3>Feedback</h3>
            <p>{{question.feedback|safe}}</p>
            {% endif %}
            <br />
            <button type="submit" name="finish" class="save btn btn-default">Overview</button>
            <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
        </form>
    </div>
</div>

<h4>Questions</h4>
<div id="menu-list">

</div>
{% endblock %}

{% block js %}
<script>
    $(document).ready(() => {
        /* beautify ignore:start */
        {% if not exam.publish_results %}
        $("ul.sba-answer-list li").each((n, el) => {
            $(el).click((e) => {
                console.log(1, el.dataset.ans);
                $("#id_answer").val(el.dataset.ans);
                $("ul.sba-answer-list li").removeClass("selected");
                $(el).addClass("selected")
            })
        }) 
        {% else %}
        $("ul.sba-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
        {% endif %}

        {% if saved_answer %}
        $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}

        for (let i = 0; i < {{ exam_length }}; i++) {
        $("#menu-list").append($(
            `<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`));

        }
        $("button.question-menu-item").on("click", (e) => {
            console.log(e.currentTarget.dataset.qn);
            document.getElementById("goto-button").value = e.currentTarget.dataset.qn;
            $("#goto-button").click();
        });
        /* beautify ignore:end */
    })
</script>
{% endblock %}
{% block css %}
<style type="text/css">
    .form-contents {
        display: none;
    }

    .selected {
        border: 1px solid purple;
    }
</style>
{% endblock %}