{{ block title }}
<style>
    .header-bar {
        position: relative;
        text-align: center;
        padding: 10px 20px;
        font-size: 30px;
        font-weight: bold;
    }
    #timer {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-size: 16px;
        font-weight: bold;
        color: black;
    }
</style>

<div class="header-bar">
    <div class="header-title">
        Preissetzung - Runde {{ prev_round }} von 10
    </div>
    <div id="timer">
        Bitte absenden in:<br>
        <span id="time">180</span> Sekunden
    </div>
</div>
{{ endblock }}

{{ block content }}

<div class="otree-body">
    <div class="center-text">
        In dieser Runde bekommen Sie nur den Preis und keine Begründung angezeigt. <br>
        Unten sehen Sie die Preise von zwei zufällig ausgewählten Produzenten in dieser Runde.
        Bitte wählen Sie, welchen der beiden Preise Sie als <b>Ihren</b> Preis für diese Runde nutzen möchten.<br>
        {{ if player.round_number > 6}}

                    <br>Erinnerung: Der Preis kann nun zwischen 10 und 60 liegen.<br>
        {{ else }}
        {{ endif }}
    </div>
<br>
    {% for opt in options %}
        <div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;">
            <p><strong>Preis:</strong> {{ opt.price }}</p>
            <p>
                <label>
                    <input type="radio" name="observer_guess" value="{{ opt.price }}" required>
                    Diesen Preis als meinen Preis nutzen.
                </label>
            </p>
        </div>
    {% endfor %}
    <div class="center-text">
    <button class="btn btn-primary">Weiter</button>
    </div>

</div>

<!-- More Styling -->
<style>
    .center-box {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin-top: 20px;
    }
    .center-text2 {
        text-align: center;
        font-weight: bold;
    }
    .center-text {
        text-align: center;
    }
    .otree-body {
        background-color: lightgrey;
        border-radius: 10px;
        padding: 20px;
        margin-top: 10px;
    }
</style>
<!-- Timer Script -->
<script>
    let totalSeconds = 180; // 2 minutes
    const timerDiv = document.getElementById('timer');
    const timerSpan = document.getElementById('time');
    let blinkInterval = null;

    // Hide the timer initially
    timerDiv.style.visibility = 'hidden';

    const countdown = setInterval(function() {
        totalSeconds--;

        if (totalSeconds <= 90) {
            // After first minute, show timer
            timerDiv.style.visibility = 'visible';
            timerSpan.textContent = totalSeconds; // update displayed time
        }

        if (totalSeconds === 10) {
            // Start blinking in the last 10 seconds
            blinkInterval = setInterval(function() {
                timerDiv.style.visibility = (timerDiv.style.visibility === 'hidden') ? 'visible' : 'hidden';
            }, 500);
        }

        if (totalSeconds <= 0) {
            clearInterval(countdown);
            if (blinkInterval) {
                clearInterval(blinkInterval);
                timerDiv.style.visibility = 'visible'; // Ensure it is visible at the end
            }
            timerDiv.textContent = 'Bitte jetzt absenden!';
        }
    }, 1000);
</script>

{{ endblock }}