{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    報酬額の決定
{% endblock %}
{% block content %}
<p>
    <div align="center">
        <h3 class="var_title">あなたは「プリンシパル」です</h3><br></div>
</p>
<div align="center">
    <p>
        &nbsp;&nbsp; &nbsp;&nbsp;
       スライダーを操作して、 <br>{{ Constants.payment }}円の中から<u>エージェントをいくらで雇うか</u>を決めてください。<br>
       <font color="#ff0000"><strong><u>※エージェントは、次の最後通牒ゲームであなたの報酬以上は必ず手元に残します。<br>受取人は、その条件を知らず、エージェントが分配額を自由に決定できると考えてます。<br>最後通牒ゲームの結果に関わらず、報酬を支払わなければなりません。</u></strong></font><br>
    </p>
    <br>


    500
    <input type="range" id="payment" name="payment" min="500" max="1000" step="10" value="500" oninput=" document.getElementById('output1').value=this.value,
        document.getElementById('output2').value=(1000 - this.value);">
    1000


    <br><br>
    エージェントに<b><output id="output1">500</output></b>円、残り<b><output id="output2">500</output></b>円<br>

    <br>
    <button id="btn" class="btn btn-primary" onclick="return confirm('本当にこの配分で良いですか？')">この配分で確定する</button>
</div>




{% endblock %}