{% extends "default.html" %}
{% block pagetitle %}User Badges{% endblock %}
{% block content %}
	<h1 class="mt-3">User Badges</h1>
	<div>This page describes the requirements for obtaining all profile badges.</div>
	<div class="overflow-x-auto mt-3">
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Image</th>
					<th>Description</th>
					<th>#</th>
					<th>Rarity</th>
				</tr>
			</thead>

			{% for badge in badges %}
				<tr>
					<td>{{badge.id}}</td>
					<td>{{badge.name}}</td>
					<td>
						<img class="contain" alt="{{badge.name}}" loading="lazy" src="{{badge.path}}" width=45.83 height=50>
					</td>
					<td>{{badge.description}}</td>
					{%- set ct = counts[badge.id] if badge.id in counts else (0, 0) %}
					<td class="badges-rarity-qty"><a href="/badge_owners/{{badge.id}}">{{ct[0]}}</a></td>
					<td data-sort="{{ct[0]}}" class="badges-rarity-ratio">{{"{:0.3f}".format(ct[1])}}%</td>
				</tr>
			{% endfor %}
		</table>
	</div>
{% endblock %}