{% load static %}

{% block content %}

<style>
/* centra l’input generato da oTree/Bootstrap */
input.form-control {
    display: inline-block !important;
    width: 160px !important;      /* scegli tu */
    margin: 0 auto !important;
}

/* bordo bordeaux come volevi */
input[type="number"],
input[type="text"],
input.form-control {
    border: 2px solid #800000 !important;
    border-radius: 6px;
}

input[type="number"]:focus,
input[type="text"]:focus,
input.form-control:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(128,0,0,0.3) !important;
}
</style>


<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;">
    Previsione sul Comportamento degli Altri Partecipanti al Gruppo
</h2>

<p style="max-width:700px; margin:auto; margin-top:20px; font-size:18px;">
Ora vorremmo che stimassi un valore.
</p>

<p style="max-width:700px; margin:auto; margin-top:20px; font-size:18px;">
    Il tuo gruppo è composto da <strong>{{ group_size }} partecipanti</strong> (compreso te).
    </p>

<p style="max-width:700px; margin:auto; margin-top:20px; font-size:18px;">
Se la tua stima è corretta, guadagnerai <strong>2 punti bonus</strong> che verranno aggiunti al tuo guadagno finale per questa attività dell'esperimento.
</p>

<hr style="color:#800000;">


<p style="max-width:700px; margin:auto; margin-top:20px; font-size:18px; text-align:center;">
Con riferimento all'attività appena svolta, secondo te quanto hanno contribuito in media gli altri partecipanti al tuo gruppo al Fondo Comune? <br>
    Inserisci un numero da 0 a 10.</p>

<div style="max-width:300px; margin:25px auto; text-align:center;">
    {{ form.belief_others }}
</div>

<div style="text-align: center; margin-top: 30px;">
        <p style="margin: 0 0 8px 0;">
            Quando hai completato l'attività, 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 %}