{% extends "base.html.j2" %}

{% block page_title %}Saved Questions{% endblock %}

{% block header_subtitle %}
<p class="text-muted">Review your saved questions for <em>{{exams['current_exam']['name']}}</em></p>
{% endblock %}

{% block form_section %}
<!-- No form on this page -->
{% endblock %}

{% block content %}
<div class="card">
    {% if serialised_questions['size'] > 0 %}
        <h2 class="text-left">{{serialised_questions['size']}} Saved Question{% if serialised_questions['size'] != 1 %}s{% endif %}</h2>
    {% else %}
        <div class="empty-state">
            <div class="empty-state-icon">📚</div>
            <div class="empty-state-title">No saved questions yet</div>
            <p class="empty-state-description">Generate some questions and save the ones you want to review later.</p>
            <a href="{{url_for('main.root')}}" class="btn btn-primary mt-2">Generate Questions</a>
        </div>
    {% endif %}
</div>

{% for q_index in range(serialised_questions['size']) %}
    <div class="card question-block" id="question-block-no-details-{{q_index}}">
        <span class="question-number">Q{{ q_index + 1 }}</span>
        <p><strong>{{ serialised_questions["questions"][q_index]['question'] }}</strong></p>
        {% for ch_index in range(4) %}
            <p class="text-muted" style="margin-left: 16px;">
                {{ serialised_questions["questions"][q_index]['choices'][ch_index]['option'] }}
            </p>
        {% endfor %}
        <div class="button-row mt-2">
            <button type="button" class="btn btn-secondary btn-sm" onclick="toggleDetails({{q_index}})">Show Details</button>
            <form class="control-button-form" action="{{url_for('questions.remove_saved_question')}}" method="POST">
                <input type="hidden" name="persistent_id" value="{{serialised_questions['questions'][q_index]['persistent_id']}}">
                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
            </form>
        </div>
    </div>
    
    <div class="card question-block" id="question-block-with-details-{{q_index}}" style="display: none;">
        <span class="question-number">Q{{ q_index + 1 }}</span>
        <p><strong>{{ serialised_questions["questions"][q_index]['question'] }}</strong></p>
        {% for ch_index in range(4) %}
            {% if serialised_questions['questions'][q_index]['choices'][ch_index]["is_correct"] %}
                <div class="correct-answer">
                    <p class="user-choice">✔ {{ serialised_questions['questions'][q_index]['choices'][ch_index]['option'] }}</p>
                    <p class="explanation">{{ serialised_questions['questions'][q_index]['choices'][ch_index]['explanation'] }}</p>
                </div>
            {% else %}
                <div class="incorrect-answer">
                    <p class="user-choice">✖ {{ serialised_questions['questions'][q_index]['choices'][ch_index]['option'] }}</p>
                    <p class="explanation">{{ serialised_questions['questions'][q_index]['choices'][ch_index]['explanation'] }}</p>
                </div>
            {%endif%}
        {% endfor %}
        
        {% if serialised_questions['questions'][q_index]['study_recommendation'] %}
        <div class="study-recommendation">
            <strong>💡 Study Recommendation:</strong> {{ serialised_questions['questions'][q_index]['study_recommendation'] }}
        </div>
        {% endif %}
        
        <div class="button-row mt-2">
            <button type="button" class="btn btn-secondary btn-sm" onclick="toggleDetails({{q_index}})">Hide Details</button>
            <form class="control-button-form" action="{{url_for('questions.remove_saved_question')}}" method="POST">
                <input type="hidden" name="persistent_id" value="{{serialised_questions['questions'][q_index]['persistent_id']}}">
                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
            </form>
        </div>
    </div>
{% endfor %}

<script>
    function toggleDetails(index) {
        const noDetails = document.getElementById(`question-block-no-details-${index}`);
        const withDetails = document.getElementById(`question-block-with-details-${index}`);
        if (noDetails.style.display === "none") {
            noDetails.style.display = "block";
            withDetails.style.display = "none";
        } else {
            noDetails.style.display = "none";
            withDetails.style.display = "block";
        }
    }
</script>
{% endblock content %}
