{% extends "base.html" %}

{% block active_page %}{% set active_page = "scoreboard" %}{% end %}

{% block title %}Word Search — Scoreboard{% end %}

{% block content %}
<h2 class="mb-4"><i class="bi bi-trophy"></i> Scoreboard</h2>

<div id="scoreboard-loading" class="text-center py-4">
    <div class="spinner-border text-secondary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

<div id="recent-games-section" class="d-none mb-4">
    <h3 class="mb-3"><i class="bi bi-clock-history"></i> Your Recent Games</h3>
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0" id="recent-games-table">
                    <thead>
                        <tr>
                            <th>Category</th>
                            <th>Player</th>
                            <th>Time</th>
                            <th>Board</th>
                            <th>Words</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<div id="popular-section" class="d-none mb-4">
    <h3 class="mb-3"><i class="bi bi-fire"></i> Popular Categories</h3>
    <div class="row g-3" id="popular-row"></div>
</div>

<div id="leaderboards-section" class="d-none">
    <h3 class="mb-3"><i class="bi bi-list-ol"></i> Leaderboards</h3>
    <div id="leaderboards-container"></div>
</div>

<div id="scoreboard-empty" class="d-none text-center py-4">
    <p class="text-muted fs-5">No completed games yet. Be the first to finish a puzzle!</p>
    <a href="{{ base_url }}game" class="btn btn-accent">Start a Game</a>
</div>

<script src="{{ static_url('js/scoreboard.js') }}"></script>
{% end %}