{% extends "../templates/basic.njk" %}
{% set leaderboards = data.leaderboards %}
{% 
    set leaderboardHeadings = {
        points: "Points",
        pointsRank: "Rank points",
        pointsTeam: "Team points",
        pointsThisWeek: "Points gathered this week",
        pointsThisMonth: "Points gathered this month"
    }
%}

{% block head %}
    <link rel="stylesheet" type="text/css" href="/assets/css/leaderboards.css">
    <title> DDStats - Leaderboards</title>
{% endblock %}

{% block body %}
    <main class="flex-container">
        <div class="flex-container regions">
            {% for region in ["Global", "Europe", "Asia", "SA", "NA", "Africa", "ME", "OLD", "Other"] %}
                <a href="/leaderboards/{{ region }}" class="region {{ "current-region" if data.region == region }}">{{ region }}</a>
            {% endfor %}
        </div>
        {% for leaderboardType, leaderboard in leaderboards %}
            <div class="leaderboard">
                <h1>{{ leaderboardHeadings[leaderboardType] }}</h1>
                {% for rank in leaderboard %}
                    <div class="rank">
                        <img src="/assets/countryflags/{{rank.flag}}.png" class="country-image">
                        <p class="rank-position">{{ rank.rank }}.</p>
                        <p class="rank-player">{{ rank.player }}</p>
                        <p class="rank-points">{{ rank.points }} pts</p>
                    </div>
                {% endfor %}
            </div>
        {% endfor %}
    </main>
{% endblock %}