{{ load static }}
{{ block content }}
<!--External CSS & js-->
<link rel="stylesheet" href="{{ static 'style_sheets/general.css' }}" type="text/css">
<link rel="stylesheet" href="{{ static 'style_sheets/tables.css' }}" type="text/css">
<script src="{{ static 'java_scripts/stage_2/sldr.js' }}"></script>

<!-- Title -->
{{ block title }}
<div class="Title">
    <h3 style="float: left"><u>Slider Training:</u> Decision Screen</h3>
    <h3 style="float: right">Round {{ player.round_number }}</h3>
</div>
{{ endblock }}

<!-- Invest Value Info. -->
<div class="draws">
    <h3>Invest Value = <span class="value">{{ invest_value }}</span></h3>
</div>

<!-- Slider & Info. -->
<p style="text-align: center">Use the slider to pick the minimum endowment for which you will <span style="color: red">not</span> choose Invest</p>
<div class="decision-slider">
    <label><input  type="range" name="pb_outside_option" id="slider" oninput="updateInputValue(this.value)" min="0" max="50"></label>
    <label><input type="number" id="sliderInput" name="pb_outside_option" oninput="updateSliderFromInput(this.value)" style="width: 2em" min="0" max="50"></label>
</div>

<!-- Additional Information -->
<ul class="draws_list">
    <li>The computer will randomly draw an endowment between 0 and 50.</li>
    <li>You will choose Invest if your minimum endowment is greater than the randomly chosen endowment.</li>
    <li>If you choose Invest, your payoff will be [<span style="background-color: yellow">{{ invest_value }}</span>]</li>
    <li>If you choose to not Invest, your payoff will be the endowment.</li>
</ul>

<!-- Next Button with confirmation pop-up & Instructions Button-->
<div class="button">
    <button>Continue</button>
</div>


{{ endblock }}