{% extends "settings2.html" %}
{% block pagetitle %}Leaderboard{% endblock %}
{% block content %}
<pre class="d-none d-md-inline-block"></pre>
<div id="leaderboard-contents" style="text-align: center; margin-bottom: 1.5rem; font-size: 1.2rem;">
	{% for lb in leaderboards %}
		{% if lb %}
			<a href="#leaderboard-{{lb.html_id}}">{{lb.header_name}}</a>{% if not loop.last %} &bull;{% endif %}
		{% endif %}
	{% endfor %}
</div>

{% macro format_user_in_table(user, style, position_no, value, user_relative_url) %}
	{% set value = value | int %}
	<tr {{style | safe}}>
		<td>{{position_no}}</td>
		<td>{% include "user_in_table.html" %}</td>
		{% if user_relative_url is not none %}
			<td><a href="/@{{user.username}}/{{user_relative_url}}">{{"{:,}".format(value)}}</a></td>
		{% else %}
			<td>{{"{:,}".format(value)}}</td>
		{% endif %}
	</tr>
{% endmacro %}

{% macro leaderboard_table(lb) %}
<h5 class="font-weight-bolder text-center pt-2 pb-3"><span id="leaderboard-{{lb.html_id}}">Top {{lb.limit}} by {{lb.table_header_name}}</span></h5>
<div class="overflow-x-auto">
<table class="table table-striped mb-5">
	<thead class="bg-primary text-white">
		<tr>
			<th>#</th>
			<th>Name</th>
			<th>{{lb.table_column_name}}</th>
		</tr>
	</thead>
	<tbody>
	{% set v_appears_in_ranking = false %}
	{% for user in lb.all_users %}
		{% set user2 = lb.user_func(user) %}
		{% if v.id == user2.id %}
			{% set style="class=\"self\"" %}
			{% set v_appears_in_ranking = true %}
		{% endif %}
		{{format_user_in_table(user2, style, loop.index, lb.value_func(user), lb.user_relative_url)}}
	{% endfor %}
	{% if lb.v_position and not v_appears_in_ranking %}
		{{format_user_in_table(v, "style=\"border-top:2px solid var(--primary)\"", lb.v_position, lb.v_value, lb.user_relative_url)}}
	{% endif %}
	</tbody>
</table>
</div>
{% endmacro %}

{% for lb in leaderboards %}
	{% if lb %}
		{{leaderboard_table(lb)}}
	{% endif %}
{% endfor %}

<a id="leader--top-btn" href="#leaderboard-contents"
		style="position: fixed; bottom: 5rem; right: 2rem; font-size: 3rem;">
	<i class="fas fa-arrow-alt-circle-up"></i>
</a>
{% endblock %}