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

{% block title %}
<div style="display: flex; justify-content: center;">
    <span>Token Grabbing Task</span>
</div>
{% endblock %}

{% block content %}

<div class="task-container">
    <h3>Round {{ round_number }}</h3>


        <p><strong>Tokens taken:</strong> {{ N_TokenTake }}</p>


    <div class="prompt">
        <p>This is the {{ round_number_th }} token out of 10 tokens.</p>
        <p>Will you take it?</p>
    </div>

                <img src="/static/tokentaken.png">
<Br>
    <br>
    <div class="buttons">
        <button name="take_token" value="False" class="btn btn-secondary" style="margin-right: 10%">Do not take</button>
        <button name="take_token" value="True" class="btn btn-primary" style="margin-left: 10%">Take</button>
    </div>
</div>

<style>
    .task-container {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    .stats {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
    }

    .buttons {
        margin-top: 30px;
    }

    .buttons button {
        margin: 0 10px;
        min-width: 120px;
    }
</style>

<script>
    // Timer functionality
    document.addEventListener('DOMContentLoaded', function() {
        let timeLeft = {{ TIME_PER_ROUND }};
        const timerElement = document.getElementById('timer');

        const timer = setInterval(function() {
            timeLeft--;
            timerElement.textContent = timeLeft;

            if (timeLeft <= 0) {
                clearInterval(timer);
                // Auto-submit the form when time runs out
                const form = document.querySelector('form');
                form.submit();
            }
        }, 1000);
    });

<!--.otree-timer {-->
<!--    display: none;-->
<!--}-->
</style>
{% endblock %}