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

{% block content %}
<link rel="stylesheet" href="{% static 'venturini_pg/mystyle.css' %}">

<div style="
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: -10px;
    margin-bottom: 25px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Calculator.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/DNA.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper3.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>


<h2 style="text-align:center; color:#800000; font-weight:800;">
    Risultati
</h2>

<div style="max-width:700px; margin:25px auto; font-size:18px;">

    <p>
        Hai ricevuto <strong>5 punti iniziali</strong> per aver partecipato a questo esperimento.
    </p>

    <p>
        Il metodo selezionato casualmente per il tuo guadagno è:
        <strong>
            {% if payoff_mode == "strategy" %}
                Seconda Attività
                {% if payoff_rule == "unconditional" %} - Decisione NON Condizionata{% endif %}
                {% if payoff_rule == "table" %} - Decisione Condizionata{% endif %}
            {% else %}
                Terza Attività
            {% endif %}
        </strong>
    </p>

    <p>
        Hai contribuito: <strong>{{ contribution }} punti</strong>
    </p>
    <p>
        Totale contribuito dal gruppo usato per il tuo guadagno: <strong>{{ total }} punti</strong>
    </p>

    {% if payoff_mode == "oneshot" %}
    <p>
        Punti bonus ottenuti: <strong>{{ belief_bonus }} punti</strong>
    </p>
    {% endif %}

    <hr>

    <p style="font-size:20px;">
        <strong>Il tuo ID partecipante è:</strong>
        <span style="color:#800000; font-weight:800;">{{ participant_id }}</span>
    </p>

    <p style="font-size:20px;">
        <strong>Il tuo guadagno finale dunque pari a :</strong>
        <span style="color:#800000; font-weight:800;">
            {{ payoff }} punti
        </span>
    </p>

    <p>
        <strong>Per favore, prendi nota del tuo ID partecipante e di quanti punti hai guadagnato</strong>.
    </p>

</div>

<div style="text-align: center; margin-top: 30px;">
        <p style="margin: 0 0 8px 0;">
            Quando hai preso nota del tuo ID partecipante e del tuo guadagno, clicca su Continua.
        </p>
        <button class="otree-btn-next btn btn-bordeaux">Continua</button>
    </div>

<div style="
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-items: center;
    gap: 25px 20px;
    margin-top: 25px;
    margin-bottom: 30px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Blackboard.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Lab.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Emc.png' %}" style="height: 70px;">
        <img src="{% static 'venturini_pg/sencos.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S25_Wallpaper1.png' %}" style="height: 90px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>

{% endblock %}