{% extends 'base.html' %}

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

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

    {% if exam.publish_results %}
        <div class="alert alert-primary review-mode-alert" role="alert">
            Exam is in review mode. Score are available
            {% if request.user.is_authenticated %}
                <a href="{% url 'physics:exam_scores_user' pk=exam.id %}">here</a>

            {% else %}
                <a href="{% url 'physics: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 request.user.is_authenticated %}
                <a href="{% url 'physics:exam_scores_user' pk=exam.id %}">here</a>

            {% else %}
                <a href="{% url 'physics: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. <span class="d-block">Click any tile to jump to that question.</span></div>

    <div class="physics-finish-list" role="list">
        {% for question, answer, flagged in question_answer_tuples %}
            {% comment %} Use an anchor styled as a button rather than nesting button inside anchor (invalid HTML). Keep link targets unchanged. {% endcomment %}
            {% if not cid %}
                <a role="listitem" href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"
                   class="overview-question-btn btn btn-outline-secondary {% if flagged %}flagged{% endif %}"
                   aria-label="Go to question {{ forloop.counter }}"
                   {% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
                    <span class="qn-num">{{forloop.counter}}</span>{% if answer and answer.answer %}<span class="qn-ans">: {{answer.answer}}</span>{% endif %}
                    {% if flagged %}<span class="question-flag" aria-hidden="true">⚑</span>{% endif %}
                </a>

            {% else %}
                <a role="listitem" href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"
                   class="overview-question-btn btn btn-outline-secondary {% if flagged %}flagged{% endif %}"
                   aria-label="Go to question {{ forloop.counter }}"
                   {% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
                    <span class="qn-num">{{forloop.counter}}</span>{% if answer and answer.answer %}<span class="qn-ans">: {{answer.answer}}</span>{% endif %}
                    {% if flagged %}<span class="question-flag" aria-hidden="true">⚑</span>{% endif %}
                </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 class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?. This will end your attempt and you will not be able to change your answers. Are you sure?">Finish Exam</button>
        {% else %}
            <button class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?. This will end your attempt and you will not be able to change your answers. Are you sure?">Finish Exam</button>
        {% endif %}
    {% endif %}

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

{% endblock %}

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

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

{% block css %}
    <style>
    /* Overview page specific styles */
        .overview-text {
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .physics-finish-list {
            display: grid;
        /* Limit the maximum width of each tile so buttons don't stretch too wide on large screens.
           Each tile will be between 80px and 140px. The grid will wrap responsively. */
            grid-template-columns: repeat(auto-fit, minmax(80px, 140px));
            justify-content: start;
            gap: .5rem;
            align-items: stretch;
            margin-bottom: 1rem;
        }

        .overview-question-btn {
        /* Fill the grid cell but the cell itself is capped by the grid-template-columns above. */
            width: 100%;
            box-sizing: border-box;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: .5rem .75rem;
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

    /* Flagged questions show only the flag icon; do not change border color */

        /* Ensure global `.flagged` rules don't change the overview tile text colour. */
        .overview-question-btn.flagged {
            color: inherit !important;
        }
        .overview-question-btn.flagged .qn-num,
        .overview-question-btn.flagged .qn-ans {
            color: inherit !important;
        }

        .overview-question-btn .question-flag {
            margin-left: auto;
            font-size: 0.95rem;
            color: #ffc107;
            line-height: 1;
        }

    /* Unanswered questions should draw attention */
        .overview-question-btn[title] {
            border-color: #dc3545 !important;
            color: #dc3545 !important;
            background: rgba(220,53,69,0.03);
        }

        #time-details {
            font-size: .95rem;
            color: #9aa0a6;
            margin-top: .5rem;
        }

    /* Make the finish button stand out on small screens */
        .btn-primary.mt-3 {
            min-width: 160px;
        }

        @media (max-width: 575.98px) {
            .physics-finish-list {
            /* On very small screens allow slightly narrower tiles but still wrap */
                grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
            }
            .overview-question-btn { font-size: .95rem }
        }
    </style>
{% endblock %}