{{ block title }}
    <center> Extra payment to the workers </center>
{{ endblock }}
{{ block content }}

<style>
    .box {
        border: 1px solid lightgrey; /* Light grey border */
        padding: 20px; /* Adds space around the text inside the box */
        background-color: #f7f7f7; /* Optional: Light grey background */
    }
</style>

<div class=" box">
<center>

Please, allocate exactly <b>{{ budget }} ECU</b> among your workers.
<br>

    <br> <i> The given money does not relate anyhow to your final payoff.</i>
<br>
<br>
{{ formfields }}

    </center>
    </div>
    <br>
<br>
<center>
    {{ next_button }}
</center>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        let inputField = document.querySelector("input[name = 'w1_bon']");
        if (inputField && inputField.value) {
            inputField.value = ''; // Clear initial value
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let inputField = document.querySelector("input[name = 'w2_bon']");
        if (inputField && inputField.value) {
            inputField.value = ''; // Clear initial value
        }
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        let inputField = document.querySelector("input[name = 'w3_bon']");
        if (inputField && inputField.value) {
            inputField.value = ''; // Clear initial value
        }
    });
</script>
{{ endblock }}