{% extends 'base.html' %}

{% block title %}Vocabulary Quiz{% 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</h3>
                    <div class="text-white-50 small">Topic: {{ topic.title }}</div>
                </div>
                <div class="card-body">
                    <p class="lead mb-4">Test your vocabulary knowledge with this quiz. Choose the correct meaning for each word.</p>
                    
                    <form method="POST" action="{{ url_for('student.vocabulary_quiz_submit', quiz_id=quiz.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        {% for question in questions %}
                        <div class="mb-4 p-3 border rounded{% if loop.index % 2 == 0 %} bg-light{% endif %}">
                            <p class="mb-1 fw-bold">Question {{ loop.index }}:</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="options">
                                {% for option in question.get_options() %}
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="question_{{ question.id }}" 
                                           id="q{{ question.id }}_option{{ loop.index }}" value="{{ option }}" required>
                                    <label class="form-check-label" for="q{{ question.id }}_option{{ loop.index }}">
                                        {{ option }}
                                    </label>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                            <a href="{{ url_for('student.vocabulary_quiz_list') }}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">Submit Quiz</button>
                        </div>
                    </form>
                </div>
                <div class="card-footer bg-white text-muted small">
                    <div class="row">
                        <div class="col-md-6">
                            <i class="fas fa-info-circle"></i> Answer all questions to complete the quiz.
                        </div>
                        <div class="col-md-6 text-md-end">
                            <i class="fas fa-lightbulb"></i> Correctly answered words will be added to your vocabulary.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}