{{ 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">
        Preisvorschlag - Runde {{ player.round_number }} 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">
        Bitte legen Sie Ihren Preis für Ihr Produkt fest. Begründen Sie anschließend ausführlich, weshalb dieser Preis angemessen ist. Ihr Preis und Ihre Erklärung wird anschließend an einen zufälligen Beobachter gesendet.<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">
            {{ formfield 'price' }}
        </div>
    </div>

    <div class="center-text2">
        {{ formfield 'explanation' }}
    </div>

    <div class="center-text">
        <br>
    </div>
    <div class="center-text2">
        <button class="otree-btn-next btn btn-primary">Preis und Erklärung absenden</button>
    </div>
</div>

<!-- Hidden fields for keystroke tracking -->
<input type="hidden" name="keystroke_price_data" id="keystroke_price_data">
<input type="hidden" name="keystroke_data" id="keystroke_data">

<!-- 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>

<!-- Keystroke Tracking Script -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let priceBox = document.querySelector("input[name='price']");
        let explanationBox = document.querySelector("textarea[name='explanation']");
        let keystrokesPrice = [];
        let keystrokesExplanation = [];

        priceBox.addEventListener("input", function () {
            let timestamp = new Date().toISOString();
            keystrokesPrice.push({ time: timestamp, text: priceBox.value });
            document.getElementById("keystroke_price_data").value = JSON.stringify(keystrokesPrice);
        });

        explanationBox.addEventListener("input", function () {
            let timestamp = new Date().toISOString();
            keystrokesExplanation.push({ time: timestamp, text: explanationBox.value });
            document.getElementById("keystroke_data").value = JSON.stringify(keystrokesExplanation);
        });
    });
</script>

<!-- 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>

{{ endblock }}