{{ extends "global/Page.html" }}
{{ block title }}Decision Page{{ endblock }}

{{ block content }}

<p style="max-width:600px;margin:0 auto 20px auto;font-size:16px;">
    Out of 10 dollars, 5$ have been initially assigned to <strong>YOU</strong> and
    5$ to an independent non-partisan water security organization.
</p>

<p style="max-width:600px;margin:0 auto 25px auto;font-size:16px;">
    Given the initial setting described, assuming you can modify this initial allocation,
    how would you allocate the money between yourself and an <i>independent non-partisan water security organization</i>?
</p>

<div style="max-width:600px;margin:0 auto;padding:20px;border:1px solid #ddd;border-radius:8px;background:#fafafa;box-shadow:0 2px 6px rgba(0,0,0,0.08);">

<p id="allocation-display" style="font-size:16px; text-align:center; margin-bottom:10px;">
    <strong>Initial allocation</strong><br>
    You = 5 &nbsp;&nbsp;|&nbsp;&nbsp; Organization = 5
</p>

<p id="allocation-selected" style="font-size:16px; text-align:center; color:#4a7aff;">
    <strong>Selected allocation</strong><br>
    You = 5 &nbsp;&nbsp;|&nbsp;&nbsp; Organization = 5
</p>

    <form method="post" style="margin-top:15px;">
        {% for value, label in choices %}
        <label style="display:block;padding:8px 10px;margin-bottom:6px;border:1px solid #ccc;border-radius:6px;cursor:pointer;background:white;">
            <input type="radio" name="allocation" value="{{ value }}" style="margin-right:10px;">
            {{ label }}
        </label>
        {% endfor %}

<button type="submit" class="submit-btn">Next</button>

    </form>

</div>

<br>

<script>
const radios = document.querySelectorAll('input[name="allocation"]');
const selectedDisplay = document.getElementById('allocation-selected');
const total = 10;

radios.forEach(radio => {
    radio.addEventListener('change', () => {
        const you = parseInt(radio.value);
        const org = total - you;
        selectedDisplay.innerHTML = `<strong>Selected allocation</strong><br>You = ${you} &nbsp;&nbsp;|&nbsp;&nbsp; Organization = ${org}`;
    });
});
</script>

{{ endblock }}