{{ block content }}
<style>
    #id_writing_text {
        height: 200px !important;
        resize: vertical; /* Optional: Allows participants to drag the corner to make it even taller if they want */
    }
</style>
<div style="font-family: Arial, sans-serif; max-width: 700px; margin: auto; padding: 20px;">
    <div class="card bg-light m-3">
        <div class="card-body">
            <div class="card bg-white m-3" style="border-left: 4px solid #0d6efd;">
  <div class="card-body">
    {{ if poor == "Yes" }}
      <p>
        Please write about a time in your life (past or present) when you felt <strong>economically insecure or financially uncertain</strong>.
      </p>
      <ul>
        <li>When you were unsure about your financial future</li>
        <li>When your job or income felt unstable</li>
        <li>When you often worried about paying bills or making ends meet</li>
      </ul>
      <p>
        Describe what was happening, how it affected your daily life, and how it made you feel. You have to write at least 400 characters (about 60–80 words).
      </p>
    {{ else }}
      <p>
        Please write about a time in your life (past or present) when you felt <strong>financially secure and confident</strong>.
      </p>
      <ul>
        <li>When your income felt stable and predictable</li>
        <li>When you had a secure job or strong financial support</li>
        <li>When you did not have to worry about bills or daily expenses</li>
      </ul>
      <p>
        Describe what was happening, how it affected your daily life, and how it made you feel. You have to write at least 400 characters (about 60–80 words).
      </p>
    {{ endif }}
  </div>
</div>

        </div>
    </div>

    <div style="margin-top: 20px;">
        {{ formfield 'writing_text' label="Type your reflection here:" }}
        <div style="text-align: right; color: #555; font-size: 0.9rem; margin-top: -10px; margin-bottom: 20px;">
            Characters typed: <span id="char_display" style="font-weight: bold;">0</span>
        </div>
    </div>

    <input type="hidden" name="char_count" id="id_char_count" value="0">
    <input type="hidden" name="time_away_seconds" id="time_away_seconds" value="0">
    <input type="hidden" name="tab_hide_count" id="tab_hide_count" value="0">
    <input type="hidden" name="copy" id="copy" value="">

</div>

<script>
(() => {
    // 1. DISABLE PASTE & TRACK CHARACTERS
    const textArea = document.getElementById('id_writing_text');
    const charDisplay = document.getElementById('char_display');
    const charHidden = document.getElementById('id_char_count');

    if (textArea) {
        // Stop pasting
        textArea.addEventListener('paste', function(e) {
            e.preventDefault();
            alert("Pasting is disabled for this task. Please type your reflection manually.");
        });

        // Count characters as they type
        textArea.addEventListener('input', function() {
            const count = this.value.length;
            charDisplay.textContent = count;
            charHidden.value = count;
        });
    }

    // 2. TAB SWITCHING TRACKING
    let hiddenStart = null;
    let accumulatedAway = 0;
    let hideCount = 0;

    document.addEventListener("visibilitychange", function () {
        if (document.hidden) {
            hiddenStart = new Date();
            hideCount += 1;
        } else {
            if (hiddenStart) {
                accumulatedAway += (new Date() - hiddenStart) / 1000;
                hiddenStart = null;
            }
        }
    });

    // 3. COPY TRACKING
    let lastCopiedText = "";
    document.addEventListener('copy', function (e) {
        try {
            let copied = window.getSelection ? window.getSelection().toString() : "";
            lastCopiedText = copied.trim();
            document.getElementById('copy').value = lastCopiedText;
        } catch (err) {}
    });

    // 4. ON SUBMIT (Triggered automatically by oTree timer)
    document.querySelector('form').addEventListener('submit', () => {
        if (hiddenStart) {
            accumulatedAway += (new Date() - hiddenStart) / 1000;
            hiddenStart = null;
        }
        document.getElementById('time_away_seconds').value = accumulatedAway.toFixed(2);
        document.getElementById('tab_hide_count').value = hideCount;
    });

})();
</script>
{{ endblock }}