{% load static %}

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

<style>
/* centra le celle */
table td, table th {
    text-align: center;
}

/* INPUT numerici: bordo bordeaux */
table td input.form-control,
input[type="number"],
input[type="text"] {
    display: inline-block !important;
    width: 160px !important;
    margin: 0 auto !important;

    border: 2px solid #800000 !important;   /* BORDEAUX */
    border-radius: 8px;
}

/* effetto focus (quando clicchi) */
table td input.form-control:focus,
input[type="number"]:focus,
input[type="text"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.25rem rgba(128, 0, 0, 0.35) !important;
    border-color: #800000 !important;
}
</style>


<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>

<p>
    <div style="margin-top:6px; margin-bottom:12px; text-align:center;">
    Qui puoi rileggere le istruzioni <div class="wc-arrow"; style="color:#800000;">↓</div>
  <a href="#" data-bs-toggle="modal" data-bs-target="#istruzioniModal"
     style="color:#800000; font-weight:800; text-decoration: underline;">
    Istruzioni
  </a>
</div>

</p>
    <h2 style="text-align:center; color:#800000; font-weight:800; margin-top:0; margin-bottom: 25px">

        Decisione di Contribuzione <u>NON</u> Condizionata
    </h2>

    <p>
    Il tuo gruppo è composto da <strong>{{ group_size }} partecipanti</strong> (compreso te).
    </p>

    <p style="margin-top:10px; font-size:18px; line-height:1.4; text-align:center;">
        Quanti punti da 0 a 10 vuoi contribuire al Fondo Comune?
    </p>

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

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

 <h2 style="text-align:center; color:#800000; font-weight:800; margin-top:0; margin-bottom: 25px">
        Decisione di Contribuzione Condizionata
    </h2>
<p>
    Il tuo gruppo è composto da <strong>{{ group_size }} partecipanti</strong> (compreso te).
    </p>
    <p style="margin-top:10px; font-size:18px; line-height:1.4;">
        Ora ti chiediamo di pensare al tuo contributo in base a quanto hanno contribuito in media gli altri
    partecipanti al gruppo.
    </p>

 <p style="margin-top:10px; font-size:18px; line-height:1.4;">
 Indica per ogni possibile contributo medio degli altri (arrotondato a un numero intero) quanto contribuirai.
    </p>

    <p style="margin-top:10px; font-size:18px; line-height:1.4;">
        Per ogni riga, immagina che il contributo medio degli altri partecipanti sia quello indicato e indica quanti punti contribuiresti tu.
    </p>

    <table class="table" style="margin-top:20px;">
    <thead>
        <tr>
            <th style="color:#800000; text-align:center;">Contributo medio degli altri nel tuo gruppo (punti)</th>
            <th style="color:#800000; text-align:center;">Tuo contributo (0–{{ endowment }})</th>
        </tr>
    </thead>
    <tbody>
    <tr><td style="text-align:center; vertical-align:middle;">0</td><td style="text-align:center;">{{ form.strategy_0 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">1</td><td style="text-align:center;">{{ form.strategy_1 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">2</td><td style="text-align:center;">{{ form.strategy_2 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">3</td><td style="text-align:center;">{{ form.strategy_3 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">4</td><td style="text-align:center;">{{ form.strategy_4 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">5</td><td style="text-align:center;">{{ form.strategy_5 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">6</td><td style="text-align:center;">{{ form.strategy_6 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">7</td><td style="text-align:center;">{{ form.strategy_7 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">8</td><td style="text-align:center;">{{ form.strategy_8 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">9</td><td style="text-align:center;">{{ form.strategy_9 }}</td></tr>
    <tr><td style="text-align:center; vertical-align:middle;">10</td><td style="text-align:center;">{{ form.strategy_10 }}</td></tr>
</tbody>
</table>


    <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>

   <!-- MODAL ISTRUZIONI -->
<div class="modal fade" id="istruzioniModal" tabindex="-1" aria-labelledby="istruzioniModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content" style="border:2px solid #800000; border-radius:12px;">

      <div class="modal-header">
        <h5 class="modal-title" id="istruzioniModalLabel" style="color:#800000; text-align:center; font-weight:900;">
          Istruzioni
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
      </div>

      <div class="modal-body" style="padding: 18px 18px;">

        <!-- ====== IL TUO TESTO ISTRUZIONI ====== -->
      <h2 style="text-align:center; color:#800000; font-weight:500; margin-top:0;">
    Cosa Devi Fare Ora?
</h2>

<p>
  Sulla base delle istruzioni che hai appena letto, ti chiederemo di prendere due tipi di decisioni:
</p>

<ol style="margin-top: 8px; margin-bottom: 8px;">
  <li>
    Una <strong>decisione di contribuzione <u>non</u> condizionata</strong>: dovrai semplicemente decidere quanti punti contribuire al Fondo Comune.
  </li>
  <li style="margin-top: 6px;">
    Una <strong>decisione di contribuzione condizionata</strong>: in una tabella, dovrai indicare quanti punti contribuiresti al Fondo Comune per ciascun possibile livello medio di contribuzione degli altri membri del tuo gruppo.
  </li>
</ol>

<p style="margin-top: 8px;">
  Questo è un problema decisionale unico che si conclude una volta che hai preso entrambe le decisioni.
</p>

<h2 style="text-align:center; color:#800000; font-weight:500; margin-top:0; margin-bottom:14px;">
    Come si Determinano i Guadagni?
</h2>

<p>
  Per determinare il guadagno individuale di ogni membro del gruppo, selezioneremo casualmente,
  con uguale probabilità, la
  <strong>decisione di contribuzione <u>non</u> condizionata</strong>
  oppure la
  <strong>decisione di contribuzione condizionata</strong>.
  <br>
  In particolare:
</p>

<ul style="margin-top: 8px; margin-bottom: 8px;">
  <li>
    Se per te viene selezionata casualmente la
    <strong>decisione di contribuzione <u>non</u> condizionata</strong> per determinare il tuo guadagno finale, allora
    utilizzeremo le <strong>decisioni di contribuzione condizionata</strong>
    degli altri partecipanti e, per ciacuno, selezioneremo la voce corrispondente
    nella tabella facendo la media delle <strong>decisioni di contribuzione <u>non</u> condizionata</strong>
    di tutti gli altri partecipanti.
  </li>

  <li style="margin-top: 6px;">
    Se per te viene selezionata casualmente la
    <strong>decisione di contribuzione condizionata</strong> per determinare il tuo guadagno finale, allora
    utilizzeremo le <strong>decisioni di contribuzione <u>non</u> condizionata</strong>
    degli altri partecipanti per selezionare il valore corrispondente
    nella tabella di
    <strong>contribuzione condizionata</strong>.
  </li>
</ul>

<p>
  Questo implica che la
  <strong>decisione di contribuzione <u>non</u> condizionata</strong>
  e la
  <strong>decisione di contribuzione condizionata</strong>
  dovranno essere prese con la stessa attenzione, perché al momento di
  prendere le decisioni non sai ancora quale delle due sarà utilizzata
  per calcolare il tuo guadagno.
</p>

<p style="margin-top: 8px;">
  In seguito a questa selezione casuale, per determinare il guadagno effettivo,
  si applica la formula vista in precedenza:
</p>
<p>
    <strong>
      Guadagno individuale = 10 - (punti contribuiti) +
      (2 × totale dei punti contribuiti nel gruppo) / (numero di partecipanti nel gruppo)
    </strong>
  </p>  <!-- ====== FINE TESTO ISTRUZIONI ====== -->

      </div>
    </div>
  </div>
</div>


{% endblock %}