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

{% block content %}
    <h3>Marking case: {{case.title}}</h3>
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">View Case</button>

    <form method="POST" class="post-form">{% csrf_token %}
        <div class="vstack gap-3">
            {% for answer, form in answer_forms %}
                <div class="border border-dark">
                    CID: {{answer.cid}}<br />
                    Answer: {{answer.answer}} <br />
                    Score: {{answer.score}}<br />
                    <div class="form-contents" data-answerid="{{answer.pk}}">
                        {{form.as_p}}
                    </div>
                </div>


            {% endfor %}
        </div>
        {% if previous %}
            <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>
        {% endif %}
        <button type="submit" name="save" class="save btn btn-default">Save</button>
        <br />
        (Answers are saved when any of the above buttons are used)

    </form>


    <div class="offcanvas offcanvas-end bg-black bg-opacity-50" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
        <div class="offcanvas-header">
        {% for series in series_list %}
            <span class="series-block">
                <span>
                    Series {{ forloop.counter }}:
                    <a href="#" onclick='window.loadDicomViewer(window.images[{{forloop.counter0}}])'>
                        {{series.get_block}}
                    </a>
                </span>
            </span>
        {% endfor %}
            <button type="button" class="btn-close-white text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">

        <div>
        <div id="single-dicom-viewer" class="dicom-viewer" data-images="" data-annotations=''>
        </div>

    </div>
        </div>
    </div>

    <script type="text/javascript">
        window.images = {
            {% for series in series_list %}
                {{ forloop.counter0 }}: ["{{ series.get_image_url_array_not_json }}"],
            {% endfor %}
        }

        $(document).ready(function () {
            setTimeout(() => {
                window.loadDicomViewer(window.images[0])
            }, 500);
        })
    </script>
{% endblock %}