{{ block title }}Your Decision{{ endblock }}
{{ block content }}

<p>You are the <strong>Dictator</strong>. You have <strong>{{ endowment }} points</strong> to split.</p>
<p>Use the slider to choose how much to keep. The other player receives the rest.</p>

<div style="margin: 30px 0;">
    <input type="range" id="slider" min="0" max="{{ endowment }}" value="0" step="1"
           style="width: 100%;">
    <input type="hidden" name="piekept" id="piekept" value="0">
</div>

<table class="table table-bordered w-50 text-center">
    <thead><tr><th>You Keep</th><th>Other Player Gets</th></tr></thead>
    <tbody>
        <tr>
            <td id="keep-display">0</td>
            <td id="give-display">{{ endowment }}</td>
        </tr>
    </tbody>
</table>

{{ next_button }}

<script>
    const slider = document.getElementById('slider');
    const piekeptInput = document.getElementById('piekept');
    const keepDisplay = document.getElementById('keep-display');
    const giveDisplay = document.getElementById('give-display');
    const endowment = js_vars.endowment;

    slider.addEventListener('input', function () {
        const kept = parseInt(this.value);
        piekeptInput.value = kept;
        keepDisplay.textContent = kept;
        giveDisplay.textContent = endowment - kept;
    });
</script>

{{ endblock }}