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

{% block content %}
    <div class="container my-4 anatomy">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
                <h2 class="h4 mb-1">Mark2 — Marking: {{ exam }}</h2>
            </div>
            <div class="text-end">
                <div class="btn-group me-2" role="group" aria-label="listing actions">
                    <button class="btn btn-sm btn-outline-secondary show-all-button">Show all</button>
                    <button class="btn btn-sm btn-outline-secondary show-unmarked-button">Show unmarked</button>
                </div>
                <a href="{% url 'anatomy:mark2' exam_pk=exam.pk sk=0 %}" class="btn btn-sm btn-primary">Start mark2</a>
            </div>
        </div>

        <div class="card">
            <div class="card-body p-2">
                <ul class="list-group list-group-flush" id="question-mark-list">
                    {% for question, unmarked_count, unmarked_count2 in question_unmarked_map %}
                        <li class="list-group-item d-flex justify-content-between align-items-start" data-unmarked="{{ unmarked_count }}">
                            <div class="me-3">
                                <a href="{% url 'anatomy:mark2' exam_pk=exam.pk sk=forloop.counter0 %}" class="fw-semibold">Question {{ forloop.counter }}:</a>
                                <div class="small text-truncate" style="max-width:60vw;">{{ question }}</div>
                            </div>
                            <div class="text-end">
                                <div class="small text-muted">Unmarked</div>
                                {% if unmarked_count > 0 %}
                                    <span class="badge bg-danger">{{ unmarked_count }}</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ unmarked_count }}</span>
                                {% endif %}
                            </div>
                        </li>
                    {% empty %}
                        <li class="list-group-item small text-muted">No questions found.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <script>
        (function(){
            function $(sel, ctx){ return (ctx||document).querySelector(sel); }
            function $all(sel, ctx){ return Array.from((ctx||document).querySelectorAll(sel)); }

            var showAllBtn = $('.show-all-button');
            var showUnmarkedBtn = $('.show-unmarked-button');
            var list = $('#question-mark-list');
            if (!list) return;

            function showAll(){
                $all('#question-mark-list .list-group-item').forEach(function(li){ li.classList.remove('d-none'); });
                showAllBtn && showAllBtn.classList.add('active');
                showUnmarkedBtn && showUnmarkedBtn.classList.remove('active');
            }

            function showUnmarked(){
                $all('#question-mark-list .list-group-item').forEach(function(li){
                    var u = parseInt(li.getAttribute('data-unmarked') || '0', 10);
                    if (u > 0) li.classList.remove('d-none'); else li.classList.add('d-none');
                });
                showUnmarkedBtn && showUnmarkedBtn.classList.add('active');
                showAllBtn && showAllBtn.classList.remove('active');
            }

            if (showAllBtn) showAllBtn.addEventListener('click', function(e){ e.preventDefault(); showAll(); });
            if (showUnmarkedBtn) showUnmarkedBtn.addEventListener('click', function(e){ e.preventDefault(); showUnmarked(); });

                    // Initialize to show all
            showAll();
        })();
    </script>
    <style>
        .show-all-button.active, .show-unmarked-button.active { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08); }
    </style>
{% endblock %}