{% extends "master/base.html" %}

{% block content %}
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-body">
                <h4 class="mb-3">Available Quizzes</h4>
                {% if quizzes %}
                    <div class="list-group">
                        {% for quiz in quizzes %}
                            <a href="{% url 'take_quiz' quiz.id %}" class="list-group-item list-group-item-action">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mb-1">{{ quiz.title }}</h5>
                                        <p class="mb-0 text-muted">{{ quiz.description }}</p>
                                    </div>
                                    <span class="badge text-bg-primary">{{ quiz.questions.count }} Questions</span>
                                </div>
                            </a>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted mb-0">No quiz available.</p>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card shadow-sm">
            <div class="card-body">
                <h4 class="mb-3">My Scores</h4>
                {% if results %}
                    <ul class="list-group list-group-flush">
                        {% for result in results %}
                            <li class="list-group-item px-0 d-flex justify-content-between">
                                <span>{{ result.quiz.title }}</span>
                                <strong>{{ result.score }}/{{ result.total }}</strong>
                            </li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <p class="text-muted mb-0">You have not participated yet.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}