{% 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; margin-bottom:30px;">
    Attività
</h2>


<p style="margin: 4px 0;">
Ti chiediamo ora di svolgere un breve compito in cui dovrai completare gli spazi vuoti con le lettere mancanti al fine di formare parole in lingua Italiana di senso compiuto.
</p>

<p style="margin: 4px 0;">
        Avrai a disposizione <strong>5 minuti</strong> per scrivere negli spazi appositi.
    </p>

 <p style="margin: 4px 0;">
       Questa attività <u><strong>NON</strong></u> permette di guadagnare dei punti. <br>
     Le tue risposte non ti permetteranno, quindi, di accumulare ulteriori punti rispetto alla dotazione iniziale fornita.
 </p>

<p>
Esempio illustrativo: _asa → casa
</p>


<p style="text-align:center; margin-top:5px;">
    Tempo rimanente:
<span id="countdown" style="font-weight:bold; color:#800000;">05:00</span>
</p>

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


<style>
  .wc-row{
    display:flex;
    align-items:center;
    gap:18px;
    margin:20px 0;
    font-size:22px;
    flex-wrap: wrap; /* evita che su schermi stretti si “rompa” male */
  }
  .wc-stimulus{
    min-width:140px;
    font-weight:600;
    letter-spacing:2px;
  }
  .wc-arrow{
    font-size:26px;
  }
  .wc-input{
    width:44px;
    height:44px;
    text-align:center;
    font-size:22px;
    background: #f0f4f7;
    border: 1px solid #d0d7df;
  }
</style>

<!-- 1: e _ _ _ zione -->
<div class="wc-row">
  <div class="wc-stimulus">e _ _ _ zione</div>
  <div class="wc-arrow"; style="color:#800000;">→</div>
    <div>e</div>
  <input class="wc-input" name="wc1_a" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc1_b" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc1_c" maxlength="1" required style="border:2px solid #800000;">
  <div>zione</div>
</div>

<!-- 2: f _ _ _ ione -->
<div class="wc-row">
  <div class="wc-stimulus">f _ _ _ ione</div>
  <div class="wc-arrow"; style="color:#800000;">→</div>
  <div>f</div>
  <input class="wc-input" name="wc2_a" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc2_b" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc2_c" maxlength="1" required style="border:2px solid #800000;">
  <div>ione</div>
</div>

<!-- 3: co _ _ no -->
<div class="wc-row">
  <div class="wc-stimulus">co _ _ no</div>
  <div class="wc-arrow"; style="color:#800000;">→</div>
  <div>co</div>
  <input class="wc-input" name="wc3_a" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc3_b" maxlength="1" required style="border:2px solid #800000;">
  <div>no</div>
</div>

<!-- 4: ma _ _ a -->
<div class="wc-row">
  <div class="wc-stimulus">ma _ _ a</div>
  <div class="wc-arrow"; style="color:#800000;">→</div>
  <div>ma</div>
  <input class="wc-input" name="wc4_a" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc4_b" maxlength="1" required style="border:2px solid #800000;">
  <div>a</div>
</div>

<!-- 5: _ _ tta -->
<div class="wc-row">
  <div class="wc-stimulus">_ _ tta</div>
  <div class="wc-arrow"; style="color:#800000;">→</div>
  <input class="wc-input" name="wc5_a" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc5_b" maxlength="1" required style="border:2px solid #800000;">
  <div>tta</div>
</div>

<!-- 6: _ _ so -->
<div class="wc-row">
  <div class="wc-stimulus">_ _ so</div>
  <div class="wc-arrow"; style="color:#800000;">→</div>
  <input class="wc-input" name="wc6_a" maxlength="1" required style="border:2px solid #800000;">
  <input class="wc-input" name="wc6_b" maxlength="1" required style="border:2px solid #800000;">
  <div>so</div>
</div>

<br>

<!-- ===== BOTTONE CONTINUA ===== -->
<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>

<!-- ===== SCRIPT: CONTO ALLA ROVESCIA + BLOCCO SE VUOTO ===== -->
<script>
(function() {
    let totalSeconds = 5 * 60; // 5 minuti
    const timerEl = document.getElementById('countdown');

    function updateTimer() {
        const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
        const seconds = String(totalSeconds % 60).padStart(2, '0');
        timerEl.textContent = minutes + ':' + seconds;

        if (totalSeconds > 0) {
            totalSeconds--;
            setTimeout(updateTimer, 1000);
        } else {
            timerEl.textContent = "00:00";
        }
    }

    updateTimer();
})();
</script>

{% endblock %}