{% 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à di Scrittura
</h2>

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

<!-- ==================== PROMPT DI SCRITTURA ==================== -->
<p style="max-width:850px; margin:auto; margin-top:20px; font-size:18px; text-align:center;">
    {{ prompt }}
</p>

<!-- ===== TEXTAREA CON BORDO BORDEAUX ===== -->
<div style="display:flex; justify-content:center; margin-top:20px;">
  <div class="writing-wrap">
    <textarea
      name="writing_answer"
      required
      rows="5"
      class="writing-ta"
    ></textarea>
  </div>
</div>


<!-- ===== BOTTONE CONTINUA ===== -->
<div style="text-align: center; margin-top: 40px;">
        <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);
        }
    }
    updateTimer();

    // Blocco su invio vuoto
    const form = document.querySelector('form');
    form.addEventListener('submit', function (e) {
        const textarea = document.querySelector('textarea[name="writing_answer"]');
        if (!textarea.value.trim()) {
            e.preventDefault();
            alert('Per favore, scrivi qualcosa prima di continuare.');
        }
    });
})();
</script>

{% endblock %}