{% extends 'base.html' %}

{% block content %}
<div class="dashboard-header">
    <h2>Welcome, {{ participant.name }}</h2>
    <p>Institution: {{ participant.institution }} | Class: {{ participant.class_name }}</p>
</div>

<div class="quiz-section">
    <h3>Available Quizzes</h3>
    {% if quizzes %}
        {% for quiz in quizzes %}
            <div class="quiz-card">
                <h4>{{ quiz.title }}</h4>
                <p>{{ quiz.description }}</p>
                <a href="{% url 'take_quiz' quiz.id %}" class="btn" style="width: auto; padding: 10px 20px;">Start Quiz</a>
            </div>
        {% endfor %}
    {% else %}
        <p>No quizzes available at the moment.</p>
    {% endif %}
</div>

<div class="results-section" style="margin-top: 40px;">
    <h3>Your Current Standing</h3>
    <table>
        <thead>
            <tr>
                <th>Latest Score</th>
                <th>Global Position</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ participant.score }} / {{ participant.total_questions }}</td>
                <td><strong>{{ position }}</strong></td>
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}