highscores.html

{% extends "auth.html" %}

{% block body %}
<div class="px-8 flex flex-col gap-2">
    <h1 class="text-center mt-4">{{_('highscores')}}</h1>
    <div class="border-b border-gray-500 pb-4">
        <div class="mx-auto w-full lg:w-3/4 text-center">
            {{_('highscore_explanation')}}
        </div>
    </div>
    {% if not public_profile %}
        <div class="flex flex-col items-center border-b border-gray-500 gap-2 pb-4">
            <div class="text-center">
                {{_('highscore_no_public_profile')}}
            </div>
            <div>
                <button class="green-btn" onclick="window.location.href = '/my-profile?open=public-profile'">{{_('create_public_profile')}}</button>
            </div>
        </div>
    {% endif %}
    {% if in_class or has_country %}
        <div class="flex flex-row gap-4 items-center justify-center">
            <button class="{% if filter == "global" %}blue-btn{% else %}green-btn{% endif %}" onclick="window.location.href = '/highscores/global'">{{_('whole_world')}}</button>
            {% if has_country %}
                <button class="{% if filter == "country" %}blue-btn{% else %}green-btn{% endif %}" onclick="window.location.href = '/highscores/country'">{{user_country}}</button>
                {% endif %}
            {% if in_class %}
                <button class="{% if filter == "class" %}blue-btn{% else %}green-btn{% endif %}" onclick="window.location.href = '/highscores/class'">{{_('your_class')}}</button>
            {% endif %}
        </div>
    {% endif %}
    <div class="border-solid border-2 border-orange-400 rounded p-4 w-fit mx-auto">
        <table class="mb-4 text-sm">
            <thead>
              <tr class="font-bold text-left border-b border-gray-500">
                  <td class="w-10 text-center"></td>
                  <td class="w-64 px-2">{{_('username')}}</td>
                  <td class="w-40 px-2">{{_('achievements')[0]|upper}}{{_('achievements')[1:]}}</td>
                  <td class="w-64 px-2">{{_('country_title')}}</td>
                  <td class="w-64 px-2">{{_('last_achievement')}}</td>
              </tr>
            </thead>
            {% for highscore in highscores %}
                <tr>
                    <td class="font-bold border-r border-gray-500 text-center">{{ highscore.ranking }}.</td>
                    <td class="px-2">
                        {% if not highscore.no_public_profile %}
                            <a href="/user/{{highscore.username}}">{{highscore.username[0]|upper}}{{highscore.username[1:]}}</a>
                        {% else %}
                            {{highscore.username[0]|upper}}{{highscore.username[1:]}}
                        {% endif %}
                    </td>
                    <td class="px-2">{{highscore.achievements}}</td>
                    <td class="px-2">{{get_country(highscore.country)}}</td>
                    <td class="px-2">
                        {% if not highscore.no_public_profile %}
                            {{_('ago')|replace("{timestamp}", highscore.last_achievement)}}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </table>
    </div>
</div>
{% endblock %}