{{ 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 {{player.round_number}} von {{C.NUM_ROUNDS}}
    </div>
    <div id="timer">
        Zeit verbleibend:<br>
        <span id="time">120</span> Sekunden
    </div>
</div>
<script>
    let totalSeconds = 120;
    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 }}
{{ block content }}
<style>
    .otree-body{
        background-color: lightgrey;
        border-radius: 10px;

    }
    .center-text2 {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
    .center-text3 {
        text-align: center;

    }
    .center-box {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */

    }
    .center-box2 {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        font-weight: bold;

    }
</style>
<div class="center-text3">
    Ihr Gruppenmitglied hat folgenden Preis für das gemeinsame Produkt vorgeschlagen: <b>{{other_player_price}}</b>.<br>

    Ihr eigener vorläufiger Preisvorschlag lautete: {{ player.price_proposal }}<br>
    <br>
</div>
<br>
<div class="center-box2">
    Bitte wählen Sie nun Ihren finalen Preisvorschlag:
<br>
</div>

<div class="center-box">
    <div class="center-text2">
        {{ formfields }}
    </div>
</div>
<div class = "center-text2">
        <button class="otree-btn-next btn btn-primary">Absenden</button>
</div>


{{ endblock }}