{% block styles %}
<link href="{% static 'style2.css' %}" rel="stylesheet"/>
{% endblock %}

{% block content %}

<div class="instructions2" style="width: 100%;">
    <div style="font-size:18px"><b><font size="+3.5">Your allocation decision</font></b></div>
</div>
<div class="instructions5" style="width: 100%;">
    <div>You now choose how much of the 100 ECU available in each period to allocate to the index fund investment.
        From this chosen amount, the order commission is deducted in each period and the remainder is invested in the fund.<br><br>
        The amount allocated to the index fund investment must be between 15 and 100 ECU per period.<br><br>
        Any amount not allocated to the index fund investment is automatically placed in the savings account.<br><br>
        <b>Note:</b> To proceed to the next page, you must move the slider at least once.
    </div>
    <div class="instructions3" style="width: 100%;">
        <label for="id_invested_amount">
            <b>Amount allocated to the index fund investment: <span id="val">{{ player.invested_amount }}</span></b>
        </label>

        <input type="hidden" id="id_slider_touched" name="slider_touched" value="False">

        <input
          type="range"
          id="id_invested_amount"
          name="invested_amount"
          min="15"
          max="100"
          step="1"
          value="{{ player.invested_amount }}"
          oninput="
            document.getElementById('val').textContent = this.value;
            document.getElementById('id_slider_touched').value = 'True';
          "
        />

    </div>
</div>
<div class="instructions4">
    Click on the 'Next' button once you have made your decision.<br>
        <b>Important:</b> You will <b>not be able to change</b> your selection afterwards. Your allocation is
        final!
</div>
<div style="text-align:right;">
    <button style="color: white; background-color: black;" class="btn-primary btn next">Next</button>
</div>

{% endblock %}