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

{% block content %}
    <div class="col-md-6">
        <h2>Marking question {{question_details.current}} of {{question_details.total}}</h2>
        <a href="{% url 'anatomy:question_detail' question.id %}" title="View the Question">View</a> 
        <a href="{% url 'anatomy:anatomy_question_update' question.id %}" title="Edit the Question">Edit</a> 
        {% if request.user.is_superuser %}<a href="{% url 'admin:anatomy_anatomyquestion_change' question.id %}" title="Edit the Question using the admin interface">Admin Edit</a>{% endif %}
        <h3>{{ question.question_type }}</h3>
        {% if question.structure %}
            Structure: {{question.structure}}<br/>
        {% endif %}
        Primary answer: <span id="primary-answer" title="The primary answer of the question">{{question.get_primary_answer}}</span><br/>

        {% if question.answer_help %}
            <details>
                <summary>Marking help:</summary>
                <div class="border border-secondary">
                {{question.answer_help|safe}}
                </div>
            </details>
        {% endif %}
 {% comment %}            <details>
               <summary>Suggest incorrect answers:</summary>
                
                {% for word in words_suggest_incorrect %}
                    <span>{{word}}<span class="user-select-none" _="on click if #id_answer_suggest_incorrect == null then 
                        set btn to #answer-suggest-incorrect-button
                        js(btn) btn.click() end
                        repeat forever
                        if #id_answer_suggest_incorrect != null then break end
                        wait 0.1s
                        end
                        end 
                        if (#id_answer_suggest_incorrect's value == '') 
                        put (#id_answer_suggest_incorrect's value + my @data-word) into #id_answer_suggest_incorrect's value 
                        else
                        put (#id_answer_suggest_incorrect's value + ',' + my @data-word) into #id_answer_suggest_incorrect's value 
                        end
                        then remove closest parent <span/>" data-word='{{word}}'>(+)</span>,</span>    
                {% endfor %}
                    
                <div class="border border-secondary">
                    {% include "anatomy/question_detail.html#suggest-incorrect-form"  %}
                </div>
            </details> {% endcomment %}




        <div class="marking">
            <form method="POST" class="post-form">{% csrf_token %}
                Click each answer to toggle through marks awarded (as per colour)
                {% if not review %}
                    {% if unmarked_exam_answers_only %}
                        Showing unmarked exam answers only <a href="{% url 'anatomy:mark_all' exam.id question_number %}">(view all answers for question)</a>
                    {% else %}
                        Showing all answers <a href="{% url 'anatomy:mark' exam.id question_number %}">(view unmarked exam answers only)</a>
                    {% endif %}
                {% endif %}
                <div class="marking-list">
                    Unmarked:
                    <ul id="new-answer-list" class="answer-list">
                        {% for answer in user_answers %}

                            {% if answer in answer_suggest_incorrect %}
                                <li><pre><span class="answer incorrect suggest" title="{{answer}}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
                            {% else %}
                                <li><pre><span class="answer not-marked" title="{{answer}}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                    Marked:
                    <ul id="marked-answer-list" class="answer-list">
                        {% for answer in correct_answers %}
                            <li><pre><span class="answer correct" title="{{answer}}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
                        {% endfor %}
                        {% for answer in half_mark_answers %}
                            <li><pre><span class="answer half-correct" title="{{answer}}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
                        {% endfor %}
                        {% for answer in incorrect_answers %}
                            <li><pre><span class="answer incorrect" title="{{answer}}" data-answerurl="{% url 'anatomy:question_user_answers_by_compare' question.pk answer|urlencode:'' %}">{{ answer }}</span></pre></li>
                        {% endfor %}
                    </ul>
                    <div class="mark-buttons">
                        <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>
                        {% 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 %}
                    </div>
                </div>
                <span class=hide>
                    {{ form.as_p }}
                </span>
            </form>
        </div>
    </div>
    <div class="col-md-6">
        <div id="single-dicom-viewer" class="marking-dicom" data-images="{{ question.get_image_url_array }}" data-annotations='{{question.get_image_annotations}}'>
        </div>
    </div>
{% endblock %}

{% block js %}

    <script type="text/javascript">
        $(document).ready(function ()  {
            console.log("loads")
            $(".answer").each(function(n, el) {
                console.log(n)
                console.log(el)
                uri = encodeURI(el.title)
                button = $(`<a tabindex="0" class='popover-button' role="button" data-toggle="popover" data-trigger="focus" title='${el.title}'>+</a>`)
                popover = $(`
    <div id="popover-content-${n}" class="hide popoverdiv">
      <ul class="popovermenu">
        <li><a href="https://www.google.com/search?q=${uri}" target="_blank">Google answer</a></li>
        <span class="copy-to-clipboard" data-text="${el.title}">Copy to clipboard</span>
        <li><a href="${el.dataset.answerurl}" target="_blank">view answers</a></li>
      </ul>
    </div>`)
                $(el).before(popover)
                $(el).before(button)


                // This is horrible
                $(button).popover({
                    html: true,
                    trigger: "focus",
                    content: function () {
                        return $(`#popover-content-${n}`).html();
                    }
                }).on('shown.bs.popover', function(e, n
                ) {
                    text = el.title
                    $(`.copy-to-clipboard`).on("click", function(e) {
                        navigator.clipboard.writeText(text);
                    });
                });
            })

        }

        )
    </script>

{% endblock %}

{% block css %}
    <style>
        .suggest {
            border: 1px dashed;
        }
        .answer{
            cursor: pointer;
        }
        #primary-answer {
            font-weight: strong;
            color: white;
        }
        .popover-button {
            padding-right: 5px;
            cursor: help;
            text-decoration: none;
            color: purple;
        }
        .popover, .popover-header {
        }

        .popovermenu {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        .popovermenu li {
        }
        .popovermenu li a {
            color: blue;
        }

        .answer-list{
            list-style: none;
            padding-left: 0px;

        }
    </style>
{% endblock css %}