{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Learning Phase{% endblock %}

{% block content %}
<div style="text-align:center; margin-top:12%;">
    <div id="pair-display" style="font-size:2.5em; font-weight:bold; min-height:1.5em;">
        &nbsp;
    </div>
    <div id="counter" style="color:gray; font-size:1em; margin-top:10px;"></div>
</div>

<!-- Hidden submit — triggered automatically by JS after all pairs shown -->
<div style="display:none">{% next_button %}</div>

<script>
    var pairs = {{ shuffled_pairs|json }};
    var current = 0;

    function showPair(index) {
        if (index < pairs.length) {
            document.getElementById('pair-display').textContent =
                pairs[index].cue + '  \u2014  ' + pairs[index].target;
            document.getElementById('counter').textContent =
                (index + 1) + ' / ' + pairs.length;
            setTimeout(function () { showPair(index + 1); }, 3000);
        } else {
            document.forms[0].submit();
        }
    }

    showPair(0);
</script>
{% endblock %}