{{ extends 'global/Page.html' }}
{{ block title }}Closing{{ endblock }}

{{ block content }}

<h4>
    Results
</h4>
<ul>
    <li>Your bank account has: <div id="final_money"></div></li>
    <li>Your sustainability performance was: <img id="final_stars" class="game-stars" class=“https://i.ibb.co/khPB5NK/0stars.png” /></li>
</ul>
<p>
Based on these results,    
</p>    
<ul>
    <li>You can win: {{ win_amount }}€</li>
    <li>You can donate: {{ donation_amount }}€</li>
</ul>
<h4>
    Final Questions
</h4>

{{ formfields }}

<p>Your e-mail will only be used to contact you in case you are the lucky prize winner, or to share the results of the study with you. Afterwards, your information will be deleted.</p>
{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
const star_image_links = [
  "https://i.ibb.co/khPB5NK/0stars.png",
  "https://i.ibb.co/mDKMtVT/1star.png",
  "https://i.ibb.co/QfcDdMT/2stars.png",
  "https://i.ibb.co/sJcvJmc/3stars.png",
  "https://i.ibb.co/4T4Tmmg/4stars.png",
  "https://i.ibb.co/3McDJ75/5stars.png"
];

document.getElementById("final_money").innerText = 
    js_vars.final_money.toLocaleString(
	  undefined, // leave undefined to use the visitor's browser to overwrite it
	  { minimumFractionDigits: 2 }
	) + "€";
document.getElementById("final_stars").src = star_image_links[Math.round(js_vars.star_sum / 4.0)];
</script>
{{ endblock }}