{% extends "wrapped/1/wrapped_base.html" %}
{% comment %}
COPYRIGHT (C) 2018-2024 BDE ENS Paris-Saclay
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load i18n pretty_money %}
{% block content %}
	<div class="wrap-container">
		<h2>{% trans "NoteKfet Wrapped" %}</h2>
		<h1 id="name">{{ wrapped.note.user.username }}</h1>
	{% if wei %}
	<div class="category" id="wei">
		{% trans "You participate to the wei: " %} {{ wei }} {% trans "in the" %} {{ bus }}
	</div>
	{% endif %}
	<div class="ranking-bar">
		<div class="ranking-progress" id="pot_bar">
			{{ nb_pot_entry }}/{{ nb_pots }} {% trans "pots !" %}
		</div>
		<script>
			const percentage = ({{ nb_pot_entry }} / {{ nb_pots }}) *100;
			document.getElementById("pot_bar").style.width = percentage + '%';
		</script>
	</div>
	{% if first_conso %}
	<ul class="list" id="user_conso">
		<li>{% trans "Your first conso of the year: " %}   {{ first_conso }}</li>
		<li>{% trans "Your prefered consumtion category: " %}   {{ top_category }}</li>
	<script>
		let top3 = {{ top3_conso | safe }};
		let l = document.getElementById("user_conso");
		top3.forEach(item => {
			let li = document.createElement("li");
			li.textContent = item[1] + "   " + item[0];
			l.appendChild(li);
		});
	</script>
	</ul>
	{% endif %}
	<div class="category">
		{{ nb_rechargement }}  {% trans ": it's the number of time your reload your note" %}
	</div>
	{% if class_conso_all > 0 %}
	{% trans "Your overall expenses: " %} 
	<div class="ranking-bar">
		<div class="ranking-progress" id="all_bar">
			{{ class_conso_all }}/{{ class_part_all }} {% trans "with" %} {{ amount_conso_all }}€
		</div>
	</div>
	<script>
		const p_all = 100 - (({{ class_conso_all }} - 1) / {{ class_part_all }}) * 100;
		document.getElementById("all_bar").style.width =  p_all + '%';
	</script>
	{% endif %}
	<br>
	{% if class_conso_bde > 0 %}
	{% trans "Your expenses to BDE: " %}
	<div class="ranking-bar">
		<div class="ranking-progress" id="bde_bar">
			{{ class_conso_bde }}/{{ class_part_bde }} {% trans "with" %} {{ amount_conso_bde }}€
		</div>
	</div>
	<script>
		const p_bde = 100 - (({{ class_conso_bde }} - 1) / {{ class_part_all }}) * 100;
		document.getElementById("bde_bar").style.width = p_bde + '%';
	</script>
	{% endif %}
	</div>
{% endblock %}