{% extends "CHRISTMAS/default.html" %}

{% block pagetitle %}Leaderboard{% endblock %}

{% block subHeader %}
	<div class="relative max-w-screen-2xl mx-auto px-4 py-4 grid grid-cols-12 rounded-t">
		<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-gray-300 to-gray-200 dark:bg-none dark:bg-gray-800 rounded-t sub-header-shadow"></div>
		<div class="relative col-span-full flex items-center">
			<div>
				<h1 class="font-bold text-xl font-heading leading-normal mb-0">
					Leaderboards
				</h1>
				<small class="block text-gray-700 dark:text-gray-400 leading-normal">
					In-depth analysis of our most terminally online members' careers.
				</small>
				<ul class="hidden text-gray-500 text-sm flex items-center space-x-3 leading-normal mb-0">
					<li>
						<a class="{% if not '=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications">
							Wealthiest
						</a>
					</li>
					<li>
						<a class="{% if '/notifications?posts=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?posts=true">
							Spenders
						</a>
					</li>
					<li>
						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
							Followers
						</a>
					</li>
					<li>
						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
							Posts
						</a>
					</li>
					<li>
						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
							Comments
						</a>
					</li>
					<li>
						<a class="{% if '/notifications?messages=true' in request.full_path %}font-bold text-primary{% endif %}" href="/notifications?messages=true">
							Awards
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
{% endblock %}

{% block content %}
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 25 Greediest Members
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users1 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-gray-900 text-shadow-light bg-primary{% elif users1.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{users1.index(user)+1}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user.profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user.username else 'bg-white border-gray-300' }}" alt="{{ user.username }} avatar"/>
				{% if users1.index(user)+1 == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
					{{user.username}}
				</a>
				{% if user.customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user.customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user.coins}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 20 Top Spenders
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users7 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users7.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{users7.index(user)+1}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user.profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user.username else 'bg-white border-gray-300' }}" alt="{{ user.username }} avatar"/>
				{% if users7.index(user)+1 == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
					{{user.username}}
				</a>
				{% if user.customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user.customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user.coins_spent}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 15 Most Popular
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users2 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users2.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{users2.index(user)+1}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user.profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user.username else 'bg-white border-gray-300' }}" alt="{{ user.username }} avatar"/>
				{% if users2.index(user)+1 == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
					{{user.username}}
				</a>
				{% if user.customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user.customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user.stored_subscriber_count}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 10 Most Terminally Online (Posts)
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users3 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users3.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{users3.index(user)+1}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user.profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user.username else 'bg-white border-gray-300' }}" alt="{{ user.username }} avatar"/>
				{% if users3.index(user)+1 == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
					{{user.username}}
				</a>
				{% if user.customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user.customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user.post_count}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 10 Most Terminally Online (Comments)
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users4 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users4.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{users4.index(user)+1}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user.profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user.username else 'bg-white border-gray-300' }}" alt="{{ user.username }} avatar"/>
				{% if users4.index(user)+1 == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
					{{user.username}}
				</a>
				{% if user.customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user.customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user.comment_count}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 10 Biggest Winners
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users5 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users5.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{users5.index(user)+1}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user.profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user.username else 'bg-white border-gray-300' }}" alt="{{ user.username }} avatar"/>
				{% if users5.index(user)+1 == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user.username}}">
					{{user.username}}
				</a>
				{% if user.customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user.customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user.received_award_count}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 25 Most Downvoted
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users9 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users9.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{loop.index}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user[0].profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user[0].username else 'bg-white border-gray-300' }}" alt="{{ user[0].username }} avatar"/>
				{% if loop.index == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user[0].username}}">
					{{user[0].username}}
				</a>
				{% if user[0].customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user[0].customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user[1]}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 25 Highest Badge Earners
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users12 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users12.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{loop.index}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user[0].profile_url}}" class="flex-shrink-0 p-[3px] border w-12 h-12 object-cover {{ 'bg-red-800 border-red-900' if v.username == user[0].username else 'bg-white border-gray-300' }}" alt="{{ user[0].username }} avatar"/>
				{% if loop.index == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="12px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user[0].username}}">
					{{user[0].username}}
				</a>
				{% if user[0].customtitle %}
				<p class="text-sm" style="#{{user.namecolor}}">
					{{user[0].customtitle | safe}}
				</p>
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user[1]}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
{% if users13 %}
<div class="col-span-full mb-6">
	<div class="flex items-center px-4 py-4 bg-gradient-to-t from-gray-200 to-gray-100 dark:bg-none dark:bg-gray-800 sticky top-0 z-10">
		<h2 class="text-2xl font-heading font-bold mb-0">
			rDrama's 25 Biggest Marsey Artists
		</h2>
	</div>
	<div class="mb-4 flex flex-col bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden">
		{% for user in users13 %}
		<div class="flex items-center border-b last:border-b-none border-gray-300 dark:border-gray-900 shadow-inset-t-white-05 px-5 py-3 {% if v.username == user.username %}text-red-900 text-shadow-light bg-red-600{% elif users13.index(user) % 2 != 0 %}bg-gray-200 dark:bg-gray-700{% endif %}">
			<!-- Rank -->
			<h2 class="flex-shrink-0 text-2xl font-bold font-heading text-center w-16 -ml-5 mb-0 {{ 'text-red-900' if v.username == user.username else 'text-gray-400' }}">
				{{loop.index}}
			</h2>
			<div class="relative flex-shrink-0">
				<img src="{{user[0].profile_url}}" class="flex-shrink-0 p-[3px] border w-13 h-13 object-cover {{ 'bg-red-800 border-red-900' if v.username == user[0].username else 'bg-white border-gray-300' }}" alt="{{ user[0].username }} avatar"/>
				{% if loop.index == 1 %}
				<img src="https://i.ibb.co/xFgG6yf/Coinfixed.gif" width="20px" height="13px" class="absolute -top-1 -right-2.5 object-contain"/>
				{% endif %}
			</div>
			<!-- User Details -->
			<div class="ml-3">
				{% if user[0]=='anton-d' %}
					<span class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200">
						{{user[0]}}
					</span>
					{% else %}
					<a class="block font-heading font-bold text-lg md:text-xl text-black dark:text-gray-200 hover:text-primary" href="/@{{user[0].username}}">
						{{user[0].username}}
					</a>
					{% if user[0].customtitle %}
					<p class="text-sm" style="#{{user.namecolor}}">
						{{user[0].customtitle | safe}}
					</p>
					{% endif %}
				{% endif %}
			</div>
			<div class="ml-auto mr-4 pl-3">
				<span class="text-xl font-heading font-bold {{ 'text-red-900' if v.username == user.username else 'text-gray-700' }}">
					{{user[1]}}
				</span>
			</div>
		</div>
		{% endfor %}
	</div>
</div>
{% endif %}
{% endblock %}