{{ 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">
        Unten sehen Sie die Preise und die dazugehörigen Begründungen von zwei zufällig ausgewählten
        Produzenten in dieser Runde.
        Bitte lesen Sie beide Begründungen sorgfältig durch und wählen Sie anschließend,
        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><strong>Begründung:</strong><br>{{ opt.explanation }}</p>

            <p>
                <label>
                    <input type="radio" name="observer_choice_id" value="{{ opt.producer_id }}" 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 }}