{% block title %}
<div align="center">
    <h3 class="var_title">あなたは「提案者」です</h3>
</div>
{% endblock %}
{% block content %}

<br>
<div align="center">
    <p>
        &nbsp;&nbsp; &nbsp;&nbsp;
        スライダーを操作して、 <br>{{ Constants.endowment }}円の中から<u>相手にいくら渡すか</u>を決めてください。<br>
        <font color="#ff0000"><strong><u>※あなたの提案が受取人に拒否された場合、あなたはプリンシパルから報酬を受け取ることができません。</u></strong></font></div><br>
    </p>

    <div align="center">
    0円
    <input type="range" id="proposal" name="proposal" min="0" max={{group.principal_point}} value="0"  step="10" oninput=" document.getElementById('output1').value=this.value,
        document.getElementById('output2').value=(1000 - this.value);">
    {{group.principal_point}}円

    <br><br>
    相手に<b><output id="output1">0</output></b>円、残りは<b><output id="output2">1000</output></b>円<br>
    
    <br>
    <button id="btn" class="btn btn-primary" onclick="return confirm('本当にこの配分で良いですか？')">この配分で確定する</button>
</div>




{% endblock %}