{{ block title }}{{ endblock }}

{{ block content }}
<link rel="stylesheet" href="{{ static 'css/css.css' }}">
<link rel="stylesheet" href="{{ static 'css/modal.css' }}">
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>

<div class="content-box box-neutral">
    <h2 class="section-title">
        Round {{ round_number }} of {{C.Economy_num_rounds}} — Matrix Reasoning
    </h2>
    <hr class="section-divider">

    <div class="otree-timer_2" style="margin-top: 10px;">
        Time remaining: <span id="time-left"></span> seconds
    </div>

    <div class="section-box box-info">
        <div class="section-header">
            <div class="icon">🧩</div>
            <h3>Matrix Reasoning (Part 1 of 3)</h3>
        </div>

        {{ include C.RavensQuiz_template_path }}
    </div>

    <!-- Hidden form fields (score + answers written by JS) -->
    <!-- TODO: switch to none -->
    <div style="display:inline">
        {% for field in form %}
            {% if field.name in hidden_fields %}
                {{ formfield field.name }}
            {% endif %}
        {% endfor %}
    </div>

    <div class="buttons-container" style="margin-top: 20px;">
        <div class="Instructions">
            <!-- <a onclick="open_modal(1)" class="btn btn-info">General Instructions</a> -->
        </div>
        <button id="NextButton" class="btn btn-primary">Continue (debug)</button>
    </div>
</div>

<!-- Modal: general instructions -->
<div id="myModal1" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><span class="icon">📘</span> Instructions</h2>
            <span class="close" onclick="span_click(1)">&times;</span>
        </div>
        <div class="modal-body">
            {{ include C.Instructions_general_path }}
        </div>
    </div>
</div>

<!-- Modal: practice/task instructions -->
<div id="myModal2" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2><span class="icon">📘</span> Task Instructions</h2>
            <span class="close" onclick="span_click(2)">&times;</span>
        </div>
        <div class="modal-body">
            {{ include C.Instructions_practice_1 }}
        </div>
    </div>
</div>

<script>
    let customTimerEle = document.getElementById('time-left');

    document.addEventListener("DOMContentLoaded", function (event) {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            customTimerEle.innerText = event.offset.totalSeconds;
        });
    });
</script>

{{ endblock }}