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

<div class="container mt-4">

    <h3 class="mb-4">🎓 Student Dashboard</h3>

    <!-- Performance Cards -->
    <div class="row mb-4 text-center">

        <div class="col-md-4">
            <div class="card shadow-sm p-3">
                <h4>{{ total_attempts }}</h4>
                <small class="text-muted">Total Attempts</small>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm p-3">
                <h4>{{ total_score }}</h4>
                <small class="text-muted">Total Score</small>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm p-3">
                <h4>{{ average_score }}</h4>
                <small class="text-muted">Average Score</small>
            </div>
        </div>

    </div>

    <!-- Daily Quiz Button -->
    <div class="card shadow-sm mb-4">
        <div class="card-body d-flex justify-content-between align-items-center">
            <div>
                <h5 class="mb-1">📘 Daily Quiz</h5>
                <small class="text-muted">Attempt today’s quiz</small>
            </div>

            <a href="{% url 'daily_quiz' %}" class="btn btn-primary">
                Start Quiz
            </a>
        </div>
    </div>

    <!-- Recent Attempts -->
    <div class="card shadow-sm">
        <div class="card-body">
            <h5 class="mb-3">📊 Recent Attempts</h5>

            {% if attempts %}
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Score</th>
                    </tr>
                </thead>
                <tbody>
                    {% for attempt in attempts %}
                    <tr>
                        <td>{{ attempt.submitted_at|date:"d M Y" }}</td>
                        <td>{{ attempt.score }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
                <p class="text-muted">No attempts yet.</p>
            {% endif %}

        </div>
    </div>

</div>

{% endblock %}