{{ block content }}
<!--<style>-->
<!--.otree-timer {-->
<!--display: none;-->
<!--}-->
<!--</style>-->

<p style="text-align:right; color: darksalmon">Quedan <span id="timer"></span> segundos</p>
<!-- <p style="text-align:right; color: darksalmon">Quedan <span id="time-left"></span> segundos</p>-->

            <label>
                {% blocktrans trimmed with page=page total=total %}
                    <h6 style="color: darkgrey">Ronda {{ page }} de {{ total }}</h6>
                {% endblocktrans %}
            </label>
            <div class="progress">
                <div class="progress-bar" role="progressbar" style="background-color: lightblue; width:{{ progress|json }}%;">
                    <span class="sr-only"></span>
                </div>
            </div>

<br>
<!--<h6 style="text-align:right; color: darkgrey">Ronda {{subsession.round_number}} de {{C.NUM_ROUNDS}}</h6>-->
 <h6>Considera el siguiente juego y elija</h6>

    <div class="form-group required">
        <table class="table table-bordered text-center" style="width: auto; margin: auto">
            <tr>
                <th colspan="2" rowspan="2"></th>
                <th colspan="2" style="color: forestgreen">El otro participante</th>
            </tr>
            <tr>
                <th style="color: forestgreen">A</th>
                <th style="color: forestgreen">B</th>
            </tr>
            <tr>
                <th rowspan="2"><span style="color: #007dc1">Tú</span></th>
                <td><input type="radio" name="cooperate" value="True" required><b style="color: #007dc1"> A</b></td>
                <td> <b style="color: #007dc1"> {{C.PAYOFF_A}}</b>, <b style="color: forestgreen">{{C.PAYOFF_A}}</b></td>
                <td> <b style="color: #007dc1"> {{ C.PAYOFF_C }}</b>, <b style="color: forestgreen">{{C.PAYOFF_B}}</b></td>
            </tr>
            <tr>
                <td><input type="radio" name="cooperate" value="False" required><b style="color: #007dc1"> B</b></td>
                <td><b style="color: #007dc1"> {{C.PAYOFF_B}}</b>,<b style="color: forestgreen"> {{ C.PAYOFF_C }}</b></td>
                <td><b style="color: #007dc1"> {{C.PAYOFF_D}}</b>, <b style="color: forestgreen">{{C.PAYOFF_D}}</b></td>
            </tr>
        </table>
    </div>
{{ next_button }}

<!--<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>-->

<script>
    // Set the initial time and update interval (in milliseconds)
    let timeLeft = 35;
    const updateInterval = 1000; // 1 second

    // Function to update the timer display
    function updateTimer() {
        document.getElementById("timer").innerText = " " + timeLeft;
        timeLeft--;

        if (timeLeft < 0) {
            // Time's up, handle the timeout here (e.g., show an alert)
            alert("Se acabó el tiempo. Por favor toma tu decisión.");
        } else {
            // Schedule the next update
            setTimeout(updateTimer, updateInterval);
        }
    }

    // Start the timer
    updateTimer();
</script>

{{ endblock }}