{% extends 'base.html' %}

{% block title_head %}
Leaderboard
{% endblock title_head %}

{% load gameui %}

{% block head %}
    {% if page.number == 1 %}
        {% canonical_link 'leaderboard' %}
    {% else %}
        {% canonical_link 'leaderboard' page=page.number %}
    {% endif %}
{% endblock head %}

{% block content %}
    {% load gameui %}

    <h1 class="md:text-xl pt-4 mb-2 font-semibold">Battle to the top of Tensor Trust! 🏆</h1>
    
    <div class="relative overflow-x-auto">
        <table class="w-full">
            <thead class="justify-between">
                <tr class="bg-gray-800 border border-gray-800">
                    <th scope="col" class="pl-4 py-1 text-left text-white">Rank</th>
                    <th scope="col" class="pl-4 py-1 text-left text-white">Account</th>
                    <th scope="col" class="pl-4 py-1 text-center text-white">Tier</th>
                    <th scope="col" class="pl-4 py-1 text-center text-white">Balance</th>
                </tr>
            </thead>
            <tbody class="bg-gray-200 text-sm">
                {% for current_account in page %}
                        <tr class="border {% if page.start_index|add:forloop.counter|add:-1 == 1 %}bg-yellow-100{% elif page.start_index|add:forloop.counter|add:-1 == 2 %}bg-slate-200{% elif page.start_index|add:forloop.counter|add:-1 == 3 %}bg-orange-100{% else %}bg-white{% endif %}">
                            <td class="pl-4 py-1">
                                {% if page.start_index|add:forloop.counter|add:-1 == 1 %}
                                    <span class="text-md">🥇</span>
                                {% elif page.start_index|add:forloop.counter|add:-1 == 2 %}
                                    <span class="text-md">🥈</span>
                                {% elif page.start_index|add:forloop.counter|add:-1 == 3 %}
                                    <span class="text-md">🥉</span>
                                {% else %}
                                    {{ page.start_index|add:forloop.counter|add:-1 }}
                                {% endif %}
                            </td>
                            <td class="pl-4 py-1">
                                <div class="truncate w-24 sm:w-48 md:w-48 lg:w-auto">
                                    {% if request.user.is_authenticated %}
                                        {% pretty_account_link my_account=request.user.account target_account=current_account %}
                                    {% else %}
                                        <span>{{ current_account.account_name }}</spa>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="pl-4 py-1 text-center">{% tier current_account.balance "emoji" %}</td>
                            <td class="pl-4 py-1 text-center">${{ current_account.balance }}</td>
                        </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% include "tier_list_postscript.html" with show_protection_message=request.user.is_authenticated %}

    <nav class="pages mt-4">
        <ul>
            <li>
                <a href="?page=1" class="page-active page-leftmost"><strong>First</strong></a>
            </li>

            <li>
                {% if page.has_previous %}
                    <a class="page-active" href="?page={{ page.previous_page_number }}">❮</a>
                {% else %}
                    <a class="page-inactive">❮</a>
                {% endif %}
            </li>

            {% for current_page_number in page_numbers %}
                <li>
                    <a href="?page={{ current_page_number }}" class="page-active">
                    {% if page.number == current_page_number %}
                        <strong>{{ current_page_number }}</strong>
                    {% else %}
                        {{ current_page_number }}
                    {% endif %}
                    </a>
                </li>
            {% endfor %}
            
            <li>
                {% if page.has_next %}
                    <a href="?page={{ page.next_page_number }}" class="page-active">❯</a>
                {% else %}
                    <a class="page-inactive">❯</a>
                {% endif %}
            </li>

            <li>
                <a href="?page={{ page.paginator.num_pages }}" class="page-active page-rightmost"><strong>Last</strong></a>
            </li>
        </ul>
    </nav>
{% endblock %}