{% extends 'base.html' %}

{% block content %}
    <span id="user-id">
        {% if not cid %}
            User: {{request.user}}
        {% else %}
            CID: {{cid}}
        {% endif %}
    </span>

    {% include "exam_clock.html" %}

    {% if post_survey_url %}
        <div class="alert alert-info d-flex align-items-center justify-content-between my-3" role="alert">
            <div>
                <strong>Feedback Survey:</strong> We value your feedback! Please take a quick survey about this exam.
            </div>
            <a href="{{ post_survey_url }}" class="btn btn-sm btn-info text-white">Take Survey</a>
        </div>
    {% endif %}

    <h2>Exam: {{exam}}</h2>

    {% if can_edit %}
        <div class="card mb-3">
            <div class="card-body d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                <div class="mb-2 mb-md-0">
                    {% include "generic/partials/exams/exam_status.html#publish-results" %}
                </div>
                <div>
                    <a href="{% url 'sbas:exam_update' pk=exam.id %}" class="btn btn-outline-primary btn-sm">
                        Edit exam
                    </a>
                </div>
            </div>
        </div>
    {% endif %}

    {% if exam.publish_results %}
        <div class="alert alert-primary review-mode-alert" role="alert">
            Exam is in review mode. Score are available
            {% if not cid %}
                <a href="{% url 'sbas:exam_scores_user' pk=exam.id %}">here</a>
            {% else %}
                <a href="{% url 'sbas:exam_scores_cid_user' pk=exam.id cid=cid passcode=passcode %}">here</a>
            {% endif %}
        </div>
    {% elif cid_user_exam.completed %}
        <div class="alert alert-primary review-mode-alert" role="alert">
            Exam completed. Answers are available
            {% if not cid %}
                <a href="{% url 'sbas:exam_scores_user' pk=exam.id %}">here</a>
            {% else %}
                <a href="{% url 'sbas:exam_scores_cid_user' pk=exam.id cid=cid passcode=passcode %}">here</a>
            {% endif %}
        </div>
    {% elif answer_count != exam_length %}
        <div id="unanswered-questions-alert" class="alert alert-warning" role="alert">
            You have unanswered questions.
        </div>
    {% endif %}


    <div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Unanswered questions are shown in red. <p>Click to go to a question.</p></div>
    <div class="sba-finish-list">
        {% for question, answer in question_answer_tuples %}
            {% if request.user.is_authenticated %}
                <a href="{% url 'sbas:exam_take_user' pk=exam.id sk=forloop.counter0 %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>

            {% else %}
                <a href="{% url 'sbas:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
            {% endif %}
        {% endfor %}
    </div>
    <div id="time-details">
        Start time: {{cid_user_exam.start_time}}<br/>
        Last change time: {{cid_user_exam.end_time}}<br/>
        Completed: {{cid_user_exam.completed}}
    </div>

    
    
    {% if not cid_user_exam.completed %}
        {% if not cid %}
            <button hx-get="{% url 'sbas:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
        {% else %}
            <button hx-get="{% url 'sbas:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
        {% endif %}
    {% endif %}

{% include "sbas/exam_take_help.html" %}

{% endblock %}

{% block js %}
    <script>
        $(document).ready(() => {
            {% if not exam.publish_results %}

                let time_limit = '{{exam.time_limit}}'
                if (time_limit != "None") {
                    let end_time = new Date({{cid_user_exam.start_time|date:"U"}}*1000+parseInt('{{exam.time_limit}}')*1000);

                    initializeClock("clockdiv", end_time);
                }
            {% endif %}
        })
    </script>
{% endblock %}