{% extends 'base.html' %}

{% block title %}Quiz Results{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">Vocabulary Quiz Results</h3>
                    <div class="text-white-50 small">Topic: {{ topic.title }}</div>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <div class="display-4 mb-2">{{ quiz.score }}%</div>
                        <p class="lead">
                            You answered <strong>{{ quiz.words_learned }}</strong> out of <strong>{{ quiz.questions|length }}</strong> questions correctly.
                        </p>
                        <p>
                            {% if quiz.score >= 80 %}
                            <span class="badge bg-success">Excellent!</span>
                            {% elif quiz.score >= 60 %}
                            <span class="badge bg-info">Good job!</span>
                            {% elif quiz.score >= 40 %}
                            <span class="badge bg-warning text-dark">Keep practicing!</span>
                            {% else %}
                            <span class="badge bg-danger">Needs improvement</span>
                            {% endif %}
                        </p>
                    </div>
                    
                    <hr class="my-4">
                    
                    <h4 class="mb-3">Review Your Answers:</h4>
                    
                    {% for question in questions %}
                    <div class="mb-4 p-3 border rounded {% if question.is_correct %}bg-success bg-opacity-10{% else %}bg-danger bg-opacity-10{% endif %}">
                        <p class="mb-1 fw-bold">Question {{ loop.index }}: {{ question.word }}</p>
                        <p class="mb-2">{{ question.question_text }}</p>
                        
                        {% if question.context %}
                        <p class="mb-3 fst-italic text-muted small">
                            <strong>Context:</strong> "{{ question.context }}"
                        </p>
                        {% endif %}
                        
                        <div class="mb-2">
                            <strong>Your answer:</strong> 
                            <span class="{% if question.is_correct %}text-success{% else %}text-danger{% endif %}">
                                {{ question.student_answer }}
                            </span>
                        </div>
                        
                        {% if not question.is_correct %}
                        <div class="mb-2">
                            <strong>Correct answer:</strong> 
                            <span class="text-success">{{ question.correct_answer }}</span>
                        </div>
                        {% endif %}
                        
                        <div class="mt-2">
                            <span class="badge {% if question.is_correct %}bg-success{% else %}bg-danger{% endif %}">
                                {% if question.is_correct %}
                                <i class="fas fa-check"></i> Correct
                                {% else %}
                                <i class="fas fa-times"></i> Incorrect
                                {% endif %}
                            </span>
                            
                            {% if question.is_correct %}
                            <span class="badge bg-info ms-2">
                                <i class="fas fa-book"></i> Added to vocabulary
                            </span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-4">
                        <a href="{{ url_for('student.vocabulary_quiz_list') }}" class="btn btn-secondary">
                            <i class="fas fa-list"></i> View All Quizzes
                        </a>
                        <a href="{{ url_for('student.vocabulary') }}" class="btn btn-primary">
                            <i class="fas fa-book"></i> View Your Vocabulary
                        </a>
                    </div>
                </div>
                <div class="card-footer bg-white text-muted small">
                    <div class="row">
                        <div class="col-md-6">
                            <i class="fas fa-calendar"></i> Completed: {{ quiz.completed_at.strftime('%Y-%m-%d %H:%M') }}
                        </div>
                        <div class="col-md-6 text-md-end">
                            <i class="fas fa-check-circle"></i> Correctly answered words added to your vocabulary.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}