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

{% block content %}
<h2>Case {{case_number|add:1}}

    {% if collection.show_title %}
    : {{case.title}}
    {% endif %}

</h2>

{% if collection.show_description and case.description%}
<div>
    Description: {{case.description}}
</div>
{% endif %}

<div class="pre-whitespace multi-image-block">
    {% 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 %}
</div>

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

</div>
{% if collection.show_discussion and case.discussion%}
<details>
    <summary>
        Discussion:
    </summary>
    <div>
        {{case.discussion}}
    </div>
</details>
{% endif %}
{% if collection.show_report and case.report%}
<details>
    <summary>
        Report:
    </summary>
    <div>
        {{case.report}}
    </div>
</details>
{% endif %}

<div>
    {% if previous %}
    <a href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=case_number|add:-1 %}">Previous</a>
    {% endif %}
    {% if next %}
    <a href="{% url 'atlas:collection_case_view' pk=collection.pk case_number=case_number|add:1 %}">Next</a>
    {% endif %}
</div>
<br />
Return to <a href='{{collection.get_absolute_url}}'>collection</a>
{% endblock %}
{% block js %}
<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 js %}