{% extends "global/Page.html" %}
{% load otree static %}

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}

{% block styles %}
<link href="{% static 'crainich_paiement/crainich_paiement_style.css' %}" rel="stylesheet">
{% endblock %}


{% block title %}
<center>
    <b>PAIEMENT TOTAL </b>
</center>
{% endblock %}

{% block content %}

    
<div style="border: 10px solid green; padding: 2%; font-size:23px; font-weight:bold;">




    <p>
        <b style="color:red;"> PARTIE 1 : Concernant la tâche de prise de décision </b>
    </p>

    <p>
        La décision suivante a été choisie au hasard pour votre paiement :
    </p>

    <p>
   
        <ul>
            <li>
                Option A : 50% de chance d'obtenir 8€ et 50% de chance d'obtenir 0€
            </li>
            <li>
                Option B : 100% de chance d'obtenir {{ participant.vars.sure_payoff }}€
            </li>
        </ul>
      
    </p>

    <p>
        <br>
        Pour cette situation vous avez opté pour "Option {{ participant.vars.option_to_pay }}".
    </p>


    <p>
        {% if participant.vars.payoff_relevant == "A" %}
               
                Pour l'Option A, l'un des deux résultats possibles a été
                aléatoirement choisi sur la base des probabilités correspondantes.
               
            {% endif %}

            <br/><br>
           
            Votre gain dans cette tâche est égal à <b style="color:green;"> {{ participant.vars.payoff }}. </b>
    </p>

    <div style="border: 1px solid black;">
    </div>
    <br>
   


<div>

    <p>
        <b style="color:red;">  Pour la partie 2 (tâche consistant à compter les 7) :
            Vous avez complété correctement {{ participant.vars.SCORE }} grilles : </b>
        </p>
    
     
        <p>
        Vous avez obtenu : <b style="color:green;"> {{ player.GAIN_GRILLE }}€</b>
        </p>
    
</div>
   <br>


<div style="border: 1px solid black;">
</div>

<div style="border: 1px solid black;">
</div>

<div style="border: 1px solid black;">
</div>


    <div>
        <br>
        <b style="color:red;"> AU TOTAL: </b>
        <br>
        En additionnant vos gains des deux parties ainsi que le montant reçu pour votre participation (<b style="color:green;">{{ player.SHOW_UP }}€</b>), 
        vous repartez de cette experience avec : <br>
        <center>
        <b style="color:blue; font-size: 50px;">  {{ player.LYDIA_PAIEMENT }}€ </b>
        </center>
    </div>

    

    

</div>
    <br><br>
    
    <div class="suivant">
        <div class="boutton">
            <button class="suivant_btn"> SUIVANT </button>
        </div>
    

{% endblock %}