<div class="sidebar-card quiz-scoreboard-card">
    <div class="sidebar-heading">Scoreboard</div>
    <ol class="quiz-scoreboard" aria-label="Quiz scoreboard">
        {% for entry in scoreboard %}
        <li class="quiz-scoreboard-row{% if user and entry.user and entry.user['uid'] == user['uid'] %} quiz-scoreboard-self{% endif %}">
            <span class="quiz-rank">{{ entry.rank }}</span>
            {% set _size = 28 %}{% set _size_class = "sm" %}{% set _user = entry.user %}{% include "_avatar_link.html" %}
            <span class="quiz-scoreboard-name">{% set _user = entry.user %}{% set _class = none %}{% include "_user_link.html" %}</span>
            <span class="quiz-scoreboard-stats">
                <span class="quiz-score-chip">{{ format_number(entry.total_points) }} pts</span>
                <span class="quiz-scoreboard-sub">{{ entry.quizzes_completed }} quizzes &middot; {{ format_number(entry.avg_percent) }}%</span>
            </span>
        </li>
        {% else %}
        <li class="quiz-scoreboard-empty">No ranked scores yet.</li>
        {% endfor %}
    </ol>
    <p class="quiz-scoreboard-note">Every published quiz counts your best attempt, so replaying can only raise your score.</p>
    {% if viewer_standing and viewer_standing.rank > scoreboard|length %}
    <div class="quiz-standing">
        <span class="quiz-rank">{{ viewer_standing.rank }}</span>
        <span class="quiz-scoreboard-name">You</span>
        <span class="quiz-score-chip">{{ format_number(viewer_standing.total_points) }} pts</span>
    </div>
    {% endif %}
</div>

{% if user %}
<div class="sidebar-card quiz-progress-card">
    <div class="sidebar-heading">Your progress</div>
    <div class="quiz-progress-grid">
        <div class="quiz-progress-tile"><span class="quiz-progress-value">{{ viewer_progress.get('completed', 0) }}</span><span class="quiz-progress-label">Completed</span></div>
        <div class="quiz-progress-tile"><span class="quiz-progress-value">{{ viewer_progress.get('todo', 0) }}</span><span class="quiz-progress-label">To do</span></div>
        <div class="quiz-progress-tile"><span class="quiz-progress-value">{{ format_number(viewer_progress.get('avg_percent', 0)) }}%</span><span class="quiz-progress-label">Average</span></div>
        <div class="quiz-progress-tile"><span class="quiz-progress-value">{{ viewer_progress.get('perfect_count', 0) }}</span><span class="quiz-progress-label">Perfect</span></div>
    </div>
</div>
{% endif %}
