{% extends "base.html" %}
{% block content %}

<div class="container mt-4">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>🏆 Daily Quiz Leaderboard</h4>
        <a href="{% url 'daily_quiz' %}" class="btn btn-sm btn-outline-secondary">
            Back to Quiz
        </a>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">

            {% if ranked_attempts %}

            <table class="table table-bordered text-center">
                <thead class="table-dark">
                    <tr>
                        <th>Rank</th>
                        <th>Student</th>
                        <th>Score</th>
                        <th>Submitted At</th>
                    </tr>
                </thead>
                <tbody>

                    {% for attempt in ranked_attempts %}
                    <tr
                        {% if forloop.first %}
                            class="table-warning fw-bold"
                        {% endif %}
                    >
                        <td>
                            {% if attempt.rank == 1 %}🥇
                            {% elif attempt.rank == 2 %}🥈
                            {% elif attempt.rank == 3 %}🥉
                            {% else %}
                                {{ attempt.rank }}
                            {% endif %}
                        </td>

                        <td>{{ attempt.student.email }}</td>
                        <td>{{ attempt.score }}</td>
                        <td>{{ attempt.submitted_at|date:"H:i:s" }}</td>
                    </tr>
                    {% endfor %}

                </tbody>
            </table>

            {% else %}
                <p class="text-center">No attempts yet.</p>
            {% endif %}

        </div>
    </div>

</div>

{% endblock %}