{% extends 'base.html' %}

{% block title %}Класация{% endblock %}
{% block optionalParams %}
<style>

html{
		background: linear-gradient(180deg, rgba(70,147,48,1) 33%, rgba(109,126,107,1) 100%) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		font-family: Arial, Helvetica, sans-serif;
		
}
.content{
	display: flex;
}
#one{
	font-size: 64px;
	color:rgba(70,147,48,1);

}

#two{
	font-size: 48px;
	color:rgba(70,147,48,1);

}
#three{
	font-size: 32px;
	color:rgba(70,147,48,1);

}

.place{
	font-size: 28px;
	color:rgba(70,147,48,1);

}
ul{
	list-style-type:none;
}
#text{
	padding:20vh;
}

</style>
{% endblock %}
{% block content %}

<div class="content">
	<div id="page-wrap">
		<div id="text">
		<h1 style="font-size: 84px">reCoins Класация</h1><hr><br>
		<ul>
{% for i, z in leaderboard.items %}
	{% if forloop.counter == 1 %}
		<li id="one" class="scale-in-center">{{ forloop.counter }}. {{ i }} има {{ z }}  </li><br>

	{% elif forloop.counter == 2 %}
		<li id="two" class="scale-in-center">{{ forloop.counter }}. {{ i }} има {{ z }}  </li><br>

	{% elif forloop.counter == 3 %}
		<li id="three" class="scale-in-center">{{ forloop.counter }}. {{ i }} has {{ z }}  </li>	<br>

	{% else %}
		<li class="place">{{ forloop.counter }}. {{ i }} has {{ z }} </li>	<br>
	</ul>
		{% endif %}
{% endfor %}
	</div>
</div>
</div>
{% endblock %}