{{ block title }}Make Your Offer{{ endblock }}
{{ block content }}

<p>You are the <strong>Proposer</strong>. You have <strong>{{ endowment }} points</strong> to split.</p>
<p>Use the slider to choose how much to offer the Responder. If they reject, both players earn nothing.</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="offer_amount" id="offer_amount" value="0">
</div>

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

{{ next_button }}

<script>
    const slider = document.getElementById('slider');
    const offerInput = document.getElementById('offer_amount');
    const offerDisplay = document.getElementById('offer-display');
    const keepDisplay = document.getElementById('keep-display');
    const endowment = js_vars.endowment;

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

{{ endblock }}