{{ block title }}
    Preisvorschlag - Runde {{player.round_number}} von {{C.NUM_ROUNDS}}
{{ endblock }}
{{ block content }}
<style>
    .center-box {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */

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

<div class="center-box">
    Bitte schlagen Sie Ihrem Teammitglied einen Preis für ihr Gut vor. Begründen Sie anschließend ausführlich, weshalb dieser Preis angemessen ist. Ihre Erklärung wird anschließend Ihrem Teammitglied angezeigt.
</div>

<div class="center-box">
    <div class="center-text">
        {{ formfield 'price_proposal'}}
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let price_proposalBox = document.querySelector("input[name='price_proposal']");

        let keystrokes1 = []; // Store keystroke history

        price_proposalBox.addEventListener("input", function (event) {
            let timestamp = new Date().toISOString();
            keystrokes1.push({ time: timestamp, text: price_proposalBox.value });

            // Store in a hidden input field to send to oTree
            document.getElementById("keystroke_price_data").value = JSON.stringify(keystrokes1);
        });
    });
</script>

<!-- Hidden input to store keystroke data -->
<input type="hidden" name="keystroke_price_data" id="keystroke_price_data">


<div class="center-text">
    {{ formfield 'explanation'}}
</div>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        let explanationBox = document.querySelector("textarea[name='explanation']");

        let keystrokes = []; // Store keystroke history

        explanationBox.addEventListener("input", function (event) {
            let timestamp = new Date().toISOString();
            keystrokes.push({ time: timestamp, text: explanationBox.value });

            // Store in a hidden input field to send to oTree
            document.getElementById("keystroke_data").value = JSON.stringify(keystrokes);
        });
    });
</script>

<!-- Hidden input to store keystroke data -->
<input type="hidden" name="keystroke_data" id="keystroke_data">

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