<%- include("navbar") %>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #0f172a, #1e293b);
            min-height: 100vh;
        }

        /* Wrapper */
        .leaderboard-container {
            margin-left: 250px;
            /* sidebar offset */
            margin-top: 90px;
            /* navbar offset */
            padding: 40px;
        }

        /* Header Card */
        .header-card {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            padding: 35px;
            border-radius: 20px;
            color: white;
            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.3);
            margin-bottom: 40px;
        }

        .header-card h2 {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .header-card p {
            opacity: .9;
            font-size: 14px;
        }

        /* Table Card */
        .board-card {
            background: white;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        }

        /* Table */
        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }

        thead tr {
            background: #f1f5f9;
        }

        th {
            padding: 15px;
            font-size: 14px;
            font-weight: 600;
            color: #334155;
        }

        td {
            padding: 15px;
            font-size: 14px;
            border-bottom: 1px solid #eee;
        }

        tbody tr {
            transition: .3s;
        }

        tbody tr:hover {
            background: #f8fafc;
            transform: scale(1.01);
        }

        /* Rank Styles */
        .rank-number {
            font-weight: 600;
        }

        .top1 {
            background: #fff8dc;
        }

        .top2 {
            background: #f3f4f6;
        }

        .top3 {
            background: #fef3c7;
        }

        .current-user {
            background: #d1fae5 !important;
            font-weight: 600;
        }

        /* Responsive */
        @media(max-width:992px) {
            .leaderboard-container {
                margin-left: 0;
                padding: 20px;
            }
        }
    </style>

   <div class="leaderboard-container">

    <!-- HEADER -->
    <div class="header-card">
        <h2>🏆 Course Leaderboard</h2>
        <p>See how you rank among other students</p>
    </div>

    <!-- TABLE CARD -->
    <div class="board-card">

        <table>
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Student</th>
                    <th>Total Score</th>
                </tr>
            </thead>

            <tbody>

                <% if(leaderboard.length > 0){ %>

                    <% leaderboard.forEach((user,index)=>{ %>

                        <tr class="
                            <%= index == 0 ? 'top1' : '' %>
                            <%= index == 1 ? 'top2' : '' %>
                            <%= index == 2 ? 'top3' : '' %>
                            <%= user.id == studentId ? 'current-user' : '' %>
                        ">

                            <td class="rank-number">

                                <% if(index == 0){ %>
                                    🥇
                                <% } else if(index == 1){ %>
                                    🥈
                                <% } else if(index == 2){ %>
                                    🥉
                                <% } else { %>
                                    <%= index + 1 %>
                                <% } %>

                            </td>

                            <td>
                                <%= user.name %>
                            </td>

                            <td>
                                <strong><%= user.total_score %></strong>
                            </td>

                        </tr>

                    <% }) %>

                <% } else { %>

                    <tr>
                        <td colspan="3" style="padding:40px;color:#64748b;">
                            No quiz attempts yet.
                        </td>
                    </tr>

                <% } %>

            </tbody>
        </table>

    </div>

</div>

    <%- include("footer") %>