<%- include("navbar") %>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: #0f172a;
        }

        /* Container */
        .admin-container {
            padding: 30px;
        }

        /* Header */
        .page-header {
            background: linear-gradient(135deg, #1e293b, #334155);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 25px;
            color: white;
        }

        .page-header h2 {
            margin: 0;
            font-weight: 600;
            color: white;
        }

        /* Top Student Card */
        .top-student {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 25px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .top-student h3 {
            margin: 0;
        }

        .top-score {
            font-size: 22px;
            font-weight: 600;
        }

        /* Table Card */
        .table-card {
            background: #1e293b;
            padding: 20px;
            border-radius: 12px;
        }

        /* Table */
        table {
            width: 100%;
            border-collapse: collapse;
            color: white;
        }

        thead {
            background: #334155;
        }

        th {
            padding: 12px;
            text-align: left;
            font-size: 13px;
        }

        td {
            padding: 12px;
            border-bottom: 1px solid #334155;
        }

        tr:hover {
            background: #273449;
        }

        /* Rank Icons */
        .rank {
            font-size: 18px;
        }

        .gold {
            color: #facc15;
        }

        .silver {
            color: #cbd5e1;
        }

        .bronze {
            color: #f97316;
        }

        /* Score Badge */
        .score {
            background: #6366f1;
            padding: 5px 12px;
            border-radius: 8px;
            font-size: 12px;
        }

        .empty {
            text-align: center;
            padding: 40px;
            color: #94a3b8;
        }
    </style>

    <div class="admin-container">

        <div class="page-header">
            <h2>🏆 Leaderboard</h2>
        </div>

        <!-- TOP STUDENT -->

        <% if(leaderboard.length> 0){ %>

            <div class="top-student">

                <div>
                    <h3>👑 Top Performer</h3>
                    <p style="color: white;margin-left: 40px;font-weight: bold;">
                        <%= leaderboard[0].full_name %>
                    </p>
                </div>

                <div class="top-score">
                    <%= leaderboard[0].total_score %> pts
                </div>

            </div>

            <% } %>

                <div class="table-card">

                    <table>

                        <thead>
                            <tr>
                                <th>Rank</th>
                                <th>Student</th>
                                <th>Total Score</th>
                            </tr>
                        </thead>

                        <tbody>

                            <% if(leaderboard.length> 0){ %>

                                <% leaderboard.forEach((l,i)=>{ %>

                                    <tr>

                                        <td class="rank">

                                            <% if(i==0){ %>
                                                <span class="gold">🥇</span>
                                                <% } else if(i==1){ %>
                                                    <span class="silver">🥈</span>
                                                    <% } else if(i==2){ %>
                                                        <span class="bronze">🥉</span>
                                                        <% } else { %>
                                                            <%= i+1 %>
                                                                <% } %>

                                        </td>

                                        <td>
                                            <%= l.full_name %>
                                        </td>

                                        <td>
                                            <span class="score">
                                                <%= l.total_score %>
                                            </span>
                                        </td>

                                    </tr>

                                    <% }) %>

                                        <% } else { %>

                                            <tr>
                                                <td colspan="3" class="empty">
                                                    No leaderboard data available
                                                </td>
                                            </tr>

                                            <% } %>

                        </tbody>

                    </table>

                </div>

    </div>

    <%- include("footer") %>