{% extends "otree/Page.html" %}

{% block app_styles %}
    <link rel="stylesheet" href="{% static 'global/css/styling10.css' %}">
    <link rel="stylesheet" href="{% static 'global/css/Sliders.css' %}">
{% endblock %}

{% block content %}
<div class="slide-item-end" style="display: flex;">
    <!-- Title -->
    <!-- context -->
    <div class="ContentContainer"> 
        <div class="text-container-end" id="EndResults">
            <p class="title"> The experiment has ended. These are your results: </p>
            <div class="text-container">
                <ul>
                    <li> You guessed {{ iCorrect }} correct ratings, which grants you: £{{ BeliefBonus }} </li>
                    <li> The randomly selected trial is: {{ SelectedTrial }} </li>
                    <li> The Price of the product you selected was: £{{ Price }} </li>
                    <li> The value of the product was: £{{ Q }} </li>
                    <li> You total bonus Payment is: £{{ Bonus }} </li>
                    <li> The number of trees planted will be: {{ S }} </li>
                    <li> This means we will plant at least {{ S_rounded }} trees in {{ TreeLocation }}! </li>
                </ul>
            </div>
        </div>
        <button class= "button" id="between-button"> Continue </button>
    </div>
</div>
{% endblock %}