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

Tu eres {{ player.role }}. Hellooooo


 <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_B }}</b>, <b style="color: forestgreen">{{C.PAYOFF_A}}</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_A}}</b>,<b style="color: forestgreen"> {{ C.PAYOFF_B }}</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>

{{ endblock }}