{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}

{% block title %}
	Investment Decision
{% endblock %}

{% block content %}
    
    <p>
	Your wealth is £10&nbsp;000. Your task is to completely split your wealth between the two assets. 
    </p>
    <div style="position: relative;">
        How much of the £10&nbsp;000 do you invest into Asset 2? The remainder of the £10&nbsp;000 will be
        invested into Asset 1. As a reminder: If this round is drawn as the round for your payment,
        the payment will be based on this investment decision and another return simulation for the
        two assets. {{ depend }}
    </div>
	<p>
	</p>
    <div id = "InvestmentAsset1" style="position: relative;">
    Investment into Asset 1: <br><br>
    </div>
    <p>
	
	{% for field in form %}
    {% formfield field %}
    {% endfor %}

    </p>

    <p>
    {% next_button %}
    </p>

{% endblock %}

{% block scripts %}

    <script>
        $(':input').bind('input',function(){
            var weightTemp = parseFloat(String($(':input[name=InvestmentAsset2]').val()).replace('.', '.'));
            document.getElementById('InvestmentAsset1').innerHTML= "Investment into Asset 1: <br>".concat((10000 - weightTemp).toString(10), " £").replace('.', '.');

	        if (weightTemp > 10000 || weightTemp < 0){
                window.alert("Please enter a number between 0 and 10000!");
            }
        });

    </script>
{% endblock %}