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

{% block content %}

    <h2>Review Questions</h2>

    <p>Filter questions to review. Choose a category and/or a review status, then click Start to open the first matching question that needs reviewing.</p>

    <form method="post" action="{% url 'sbas:question_review_next' %}">
        {% csrf_token %}
        <div class="mb-3">
            <label for="id_category" class="form-label">Category</label>
            {% if categories %}
                <select name="category" id="id_category" class="form-select">
                    <option value="">Any</option>
                    {% for c in categories %}
                        <option value="{{ c.pk }}">{{ c }}</option>
                    {% endfor %}
                </select>
            {% else %}
                <p><em>No category choices available for this question type.</em></p>
            {% endif %}
        </div>




        <button type="submit" class="btn btn-primary">Start review</button>

        <div class="mb-3">
            <label for="id_status" class="form-label">Review status</label>
            <select name="status" id="id_status" class="form-select">
                {% for code,label in status_options %}
                    <option value="{{ code }}" {% if code == 'UNREVIEWED' %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <p>You can also view the list of questions matching the filters below.</p>
            <button id="view-list-btn" type="button" class="btn btn-outline-primary">View list</button>
        </div>
    </form>
    </form>

    <!-- Checkbox outside the POST form so it only affects the View List flow -->
    <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" value="me" id="id_reviewed_me">
        <label class="form-check-label" for="id_reviewed_me">Only questions I've reviewed (applies to View list)</label>
    </div>

    <script>
      // When View list is clicked, read the values from the main filter form and navigate
        (function(){
            const btn = document.getElementById('view-list-btn');
            btn.addEventListener('click', function(){
                const base = "{% url 'sbas:question_review_list' %}";
                const params = new URLSearchParams();
                const categoryEl = document.getElementById('id_category');
                const statusEl = document.getElementById('id_status');
                const reviewedEl = document.getElementById('id_reviewed_me');
                if (categoryEl && categoryEl.value) params.set('category', categoryEl.value);
                if (statusEl && statusEl.value) params.set('status', statusEl.value);
                if (reviewedEl && reviewedEl.checked) params.set('reviewed', reviewedEl.value || 'me');
                const url = base + (params.toString() ? ('?' + params.toString()) : '');
                window.location.href = url;
            });
        })();
    </script>



{% endblock %}