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

{% block content %}
    <h2>Collection: {{collection.name}}</h2>

    <h3>User: {{user}}</h3>

    <ul>
        {% for casedetail, user_answer in user_answers %}
            <li class="case">

                <h4>{{forloop.counter}} / Case: {{casedetail.case.title}}</h4>
                Question started: {{user_answer.started_at}} - Answer submitted: {{user_answer.submitted_at}}
                {% if request.user.is_superuser and user_answer %}
                    &nbsp;(<a href="{% url 'admin:atlas_userreportanswer_change' user_answer.pk %}" target="_blank">Edit in admin</a>)
                {% endif %}
                <br/>
                <br/>
                {% if not user_answer %}
                    <span class="case-not-answered">Case not answered.</span>
                {% else %}
                    <div class="answer-block">
                        User answer:
                        <div class="user-answer">
                        {% if user_answer.answer %}
                            {{user_answer.answer}}
                        {% else %}
                            {{user_answer.json_answer}}
                            {% for value, user_answer, correct_answer, answer_is_correct, automark in user_answer.get_correct_json_answers %}
                                {% if not user_answer %}
                                    Not answered
                                {% else %}
                                    <div class="{% if answer_is_correct %}
                                                    correct
                                                {% else %}
                                                    incorrect
                                                {% endif %}
                                                {% if automark %}
                                                    automark
                                                {% endif %}

                                               ">
                                        <h5>{{value.title}}</h5>
                                        {{value.description}}
                                        <div
                                        >
                                            Answer : {{user_answer}}

                                            {% if not answer_is_correct %}
                                                <br/>Correct answer: {{correct_answer}}
                                            {% endif %}

                                        </div>
                                    </div>
                                {% endif %}

                            {% endfor %}
                        {% endif %}
                        </div>
                    </div>
                {% endif %}

            </li>
        {% endfor %}
    </ul>


{% endblock %}

{% block css %}
    {{ block.super }}
    <style>
        .correct {
        }

        .correct h5::after {
            content: '✓';
            color: green;
        }

        .incorrect h5::after {
            content: '✗';
            color: orange;
        }

        .incorrect.automark h5::after {
            content: '✗';
            color: red;
        }

        .answer-block>div {
            padding-bottom: 10px;
        }

        .case:has(.case-not-answered) {
            opacity: 0.5;
        }


    </style>
{% endblock %}