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

{% block content %}
<script>

    $(document).ready(function () {
        $("#flagged-button").click(function () {

            $.ajax({
                url: "{% url 'anatomy:flag_question' %}",
                data: {
                    'pk': {{ question.pk }}
                  },
        dataType: 'json',
        success: function (data) {
            console.log(data.flagged);
            if(data.flagged) {
                $("#flagged-button").text("Flagged");
                $("#flagged-button").attr("class", "flagged");

            } else {
                $("#flagged-button").text("Not Flagged");
                $("#flagged-button").attr("class", "not-flagged");
            }
        }
              });

          });
    $("#id_answer").keyup(function (event) {
        if(event.keyCode == 13) {
            $(".btn-default").click();
        }
    });
      });


</script>

<h1>Question {{question_details.current}} of {{question_details.total}}</h1>
<p>{{ question.question_type.first }}</p>
<table>
    <tr>
        <td>
            <div id="dicom-image" class="dicom-image" data-url="{{ question.image.url}}" data-annotations='{{question.image_annotations}}'>
            </div>

            <form method="POST" class="post-form">{% csrf_token %}
                {{ form.as_p }}
                {% if question_details.current > 1 %}
                <button type="submit" name="previous" class="btn btn-previous">Previous</button>
                {% endif %}
                {% if question_details.current >= question_details.total %}
                <button type="submit" name="save" class="save btn btn-default">Save</button>
                {% else %}
                <button type="submit" name="next" class="save btn btn-default">Next</button>
                {% endif %}
                <button id=flagged-button type="button"
                    class={% if answer.flagged == True %}flagged{% else %}not-flagged{% endif %}>{% if answer.flagged == True %}Flagged{% else %}Not
                    Flagged{% endif %}</button>
            </form>
        </td>
        <td>
            <div class=exam-navigation />
            <ul id=question-list>
                {% for question in questions %}
                <li><a class={% if question.pk in answered_questions %}answered{% else %}unanswered{% endif %}
                        href="{% url 'anatomy:exam_take' pk=exam.pk sk=forloop.counter0 %}">{{ forloop.counter }}{% if question.pk in flagged_questions %}!{% endif %}</a>
                </li>


                {% endfor %}
            </ul>
            </div>
        </td>
    </tr>
</table>


{% endblock %}