{{ 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; // 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 }}
{{ block content }}
<style>
    .center-box {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        text-align: center;
    }
    .center-text2 {
        text-align: center;

        font-weight: bold;
    }
    .otree-body{
        background-color: lightgrey;
        border-radius: 10px;

    }
    .center-text {
        text-align: center;
    }
</style>


<div class="center-text">
    Bitte legen Sie Ihren Preis für Ihr Produkt fest. <br>
    <br>
    {{ if group.optimization }}
            {{ if player.round_number < 6}}
                Der aktuelle Wert für <b> Ihr </b> ω beträgt <b>ω={{ player.omega_current }}</b>. <br> Der aktuelle Wert für das ω <b> aller anderen Produzenten </b>  beträgt <b>ω={{ player.omega_current }}</b>.
            {{ else }}
                {{ if group.clear }}
                    Der aktuelle Wert für <b> Ihr </b> ω  beträgt <b>ω={{ player.omega_current }}</b>.<br> Der aktuelle Wert für das ω <b> aller anderen Produzenten </b>  beträgt <b>ω={{ player.omega_current }}</b>.
                {{ else }}
                    Der aktuelle Wert für <b> Ihr </b> ω  beträgt <b>ω={{ player.omega_current }}</b>.<br> Der aktuelle Wert für das ω <b> aller anderen Produzenten </b>  beträgt entweder <b>ω={{ player.omega_current }}</b> oder <b>ω={{ player.omega_small }}</b>.
                {{ endif }}
            {{ endif }}
        {{ else }}
            {{ if player.round_number < 6}}
                <b> Ihr </b> aktueller Zielpreis beträgt <b> z = {{ player.price_aim_parameter_pre }} + 1/2&times;P</b>.<br> Der aktuelle Zielpreis <b> aller anderen Produzenten </b>  beträgt <b>z = {{ player.price_aim_parameter_pre }} + 1/2&times;P</b>.
            {{ else }}
                {{ if group.clear }}
                    <b> Ihr </b> aktueller Zielpreis beträgt <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b>.<br> Der aktuelle Zielpreis <b> aller anderen Produzenten </b>  beträgt <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b>.
                {{ else }}
                    <b> Ihr </b> aktueller Zielpreis beträgt <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b>.<br> Der aktuelle Zielpreis <b> aller anderen Produzenten </b>  beträgt entweder <b>z = {{ player.price_aim_parameter_post }} + 1/2&times;P</b> oder <b>z = {{ player.price_aim_parameter_small }} + 1/2&times;P</b>.
                {{ endif }}
            {{ endif }}
        {{ endif }}

</div>
<div class="center-box">
    <div class="center-text2">
        <p style="text-align: justify; font-size: large;">
        {{ formfields }}
        </p>
    </div>
</div>
<div class = "center-text2">
    <button class="otree-btn-next btn btn-primary">Absenden</button>
</div>

{{ endblock }}