{{ block title }}
Allocation task: Test Investment
{{ endblock }}
{{ block content }}

<div> 
    This is a test investment for you to be able to become familiar with the experiment design. <br>
    <br>
    You can allocate your hypothetical €1000 with the slider below. <br>
    You could, for example, allocate your entire investment to Asset S by moving the slider all
    the way to the right. <br>
    <br>
    If you would allocate your entire investment to Asset S you would realize a return of €300 
    if the market ends up being in a good state and -100€ if it ends up being in a bad state. <br>
    You would thus end up with €1300 if the market is in a good state and €900 if it is in a 
    bad state. You would, in this case, also maximize your sustainability score as you would 
    invest the entire €1000 into the sustainable asset. <br>
    You can see the sustainability score and the returns that your current allocation would 
    yield below the slider. <br>
    <br>
    The returns of Asset A will stay the same throughout the following rounds while those 
    of Asset S will change in every round.
</div>
<br>

<form>
    <label for="Asset A">
        <span class = "name">Asset A<br></span>
        <span class = "value">Return Good State: </span><span>{{ max_a }}€<br></span>
        <span class = "value">Return Bad State: </span><span>{{ min_a }}€<br></span>
        <span class = "value">Expected Return: </span><span>{{ exp_a }}€<br></span>
    </label>
    <label for="Asset B">
        <span class = "name">{{ name }}<br></span>
        <span class = "value">Return Good State: </span><span>{{ max_b }}€<br></span>
        <span class = "value">Return Bad State: </span><span>{{ min_b }}€<br></span>
        <span class = "value">Expected Return: </span><span>{{ exp_b }}€<br></span>
    </label>
</form>

<style>
    label {width: 200px; margin: 0 40px 20px 0;}
    .name {font-weight: bold;}
    .value {font-style: italic;}
    .align {float: None;
            overflow: hidden;}
</style>

<div class="input-group">
    <input type="range" name="allocation" min="0" max="20" class="form-range" oninput="sliderMoved(this)">
</div>

<br>

<div class="align">
    {{ include C.GAMBLE_CHART }}
</div>

<script>
    function sliderMoved(input) {
        let ratio = parseInt(input.value)*5/100;
        let safe = Math.round((js_vars.min_a*(1-ratio) + js_vars.min_b*ratio)*100)/100;
        let win = Math.round((js_vars.max_a*(1-ratio) + js_vars.max_b*ratio)*100)/100;
        let score = Math.round(ratio*100)
        let min_a = Math.round(js_vars.min_a*100)/100
        let max_a = Math.round(js_vars.max_a*100)/100
        let min_b = Math.round(js_vars.min_b*100)/100
        let max_b = Math.round(js_vars.max_b*100)/100
        redrawChartKPI(win, safe, max_a, min_a, max_b, min_b, score, true);
    }
</script>
    
<br>

{{ next_button }}

{{ endblock }}