{% extends "base.html" %}
{% load static %}
{% block title %}Leaderboard | Testpoint{% endblock %}
{% block meta_description %}Compare IELTS mock-test progress, track your rank, and build a consistent study habit.{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="{% static 'css/dashboard.css' %}?v=20260727.2"><link rel="stylesheet" href="{% static 'css/leaderboard.css' %}?v=20260727.2">{% endblock %}
{% block content %}
<div class="dashboard-page leaderboard-page">
  <div class="dashboard-layout">
    <aside class="dashboard-sidebar" aria-label="Dashboard navigation">
      <div class="dashboard-profile"><span class="dashboard-avatar dashboard-avatar--default" role="img" aria-label="Smiling default profile avatar"><i class="bi bi-emoji-smile-fill"></i></span><div><strong>{{ profile.display_name|default:request.user.get_full_name|default:request.user.username }}</strong><span>IELTS student</span></div></div>
      <nav class="dashboard-menu">
        <a href="{% url 'student_dashboard' %}"><i class="bi bi-grid"></i>Overview</a>
        <a href="{% url 'exam_list' %}"><i class="bi bi-journal-check"></i>All tests</a>
        <a class="is-active" href="{% url 'leaderboard' %}" aria-current="page"><i class="bi bi-trophy"></i>Leaderboard</a>
        <a href="{% url 'student_settings' %}"><i class="bi bi-person-gear"></i>Profile settings</a>
      </nav>
      <div class="dashboard-target"><span>Target band</span><strong>{{ profile.target_band|floatformat:1 }}</strong><p>Your leaderboard name and country can be changed in Profile settings.</p></div>
    </aside>

    <section class="leaderboard-content">
      <header class="leaderboard-heading">
        <div><h1>Leaderboard</h1><p>See how you rank, track your progress, and challenge yourself to reach your target band.</p></div>
      </header>

      <section class="rank-summary" aria-labelledby="your-rank-title">
        <div class="rank-summary__primary"><span id="your-rank-title">Your rank</span><strong>{% if current_row %}#{{ current_row.rank }}{% else %}—{% endif %}</strong><small>{% if current_row %}out of {{ rows|length }} students{% else %}Complete a scored test to join{% endif %}</small></div>
        <div class="rank-summary__band"><span>Band score</span><strong>{% if current_row %}{{ current_row.band|floatformat:1 }}{% else %}—{% endif %}</strong><small><i class="bi bi-arrow-up"></i> Keep improving each week</small></div>
        <dl><div><dt>Tests completed</dt><dd>{{ completed_tests }}</dd></div><div><dt>Current streak</dt><dd>{{ profile.streak }} day{{ profile.streak|pluralize }}</dd></div></dl>
        <div class="rank-summary__message"><p>{% if current_row %}You're making progress. Keep practicing to climb the leaderboard.{% else %}Your first completed mock test will establish your rank.{% endif %}</p><div class="rank-progress"><span style="width:{{ rank_progress }}%"></span></div></div>
      </section>

      <section class="leaderboard-board" aria-labelledby="standings-title">
        <div class="leaderboard-controls">
          <nav aria-label="Ranking period">
            <a class="{% if selected_period == 'week' %}is-active{% endif %}" href="?period=week">This Week</a>
            <a class="{% if selected_period == 'month' %}is-active{% endif %}" href="?period=month">This Month</a>
            <a class="{% if selected_period == 'all' %}is-active{% endif %}" href="?period=all">All Time</a>
          </nav>
        </div>

        <div class="leaderboard-table-wrap">
          <table class="leaderboard-table">
            <caption id="standings-title">Current standings</caption>
            <thead><tr><th>Rank</th><th>Student</th><th>Band score</th><th>Tests</th><th>Trend</th></tr></thead>
            <tbody>
              {% for student in rows %}
              <tr class="{% if student.is_current %}is-current{% endif %}">
                <td data-label="Rank">#{{ student.rank }}</td>
                <td data-label="Student"><span class="table-avatar">{{ student.initial }}</span><strong>{{ student.name }}{% if student.is_current %} <em>(You)</em>{% endif %}</strong>{% if student.demo %}<small>Preview</small>{% endif %}</td>
                <td data-label="Band score"><b>{{ student.band|floatformat:1 }}</b></td>
                <td data-label="Tests">{{ student.tests }}</td>
                <td data-label="Trend"><span class="trend trend--{{ student.trend }}"><i class="bi {% if student.trend == 'up' %}bi-arrow-up{% elif student.trend == 'down' %}bi-arrow-down{% else %}bi-dash{% endif %}"></i><span class="visually-hidden">{{ student.trend }}</span></span></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </section>
    </section>
  </div>
</div>
{% endblock %}