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

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

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

    </h2>

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

    <div class="pre-whitespace multi-image-block">
        {% for series in series_list %}
            <span class="series-block">
                <a href="#" onclick='window.loadDicomViewer(window.images[{{forloop.counter0}}])'>
                    <span>
                        Series {{ forloop.counter }}:
                        {{series.get_block}}
                    </span>
                </a>
            </span>
        {% endfor %}
    </div>

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

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

    <form method="POST" class="post-form">{% csrf_token %}
        <div class="form-contents">
            <fieldset {% if collection.publish_results %}disabled="disabled"{% endif %}>
                {{form}}
            </fieldset>
        </div>
        <p>
            {% if collection.publish_results %}
                <h4>Answer score: {{answer.score}}</h4>
                Answer feedback: {{answer.feedback|safe}}
            {% endif %}
        </p>
        {% 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 %}

        <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>
    <style>
        label {
            vertical-align: top;

        }
        .series-block {
            border: darkgray solid 1px;
            padding: 1px;
            text-decoration: none;
            text-align: center;
        }
        .series-block a {
            all: unset;
        }
        .series-block:hover {
            background-color: darkblue;
        }

        fieldset:disabled textarea {
            background-color: black;
        }
    </style>

{% 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 %}