{{ block title }}
Allocation task: Investment {{ current_round }} of {{ total_rounds }}
{{ endblock }}
{{ block content }}

<div>
    Allocate your hypothetical €1000 with the slider below so that the investment has the 
    risk return profile that you would feel best with in a real world situation.
</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 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, 0, false);
    }
</script>

<br>

{{ next_button }}

{{ endblock }}