{% extends 'base.html' %}

{% block content %}
<script>
    function updateTextInput(val, name) {
          document.getElementById(name).value=val;
        }
</script>
<form method="post">
    <label>Starting Value: </label>
    <input type="number" name="starting-value" value="{{ request.form['starting-value'] }}">
    <br>
    <label>Percent dropped: </label>
    <!-- <input type="number" name="drop" value="{{ request.form['drop'] }}""> -->
    <input type="range" id="dropRange" min="0" max="100" step=".01" value="{{ request.form['drop'] }}" onchange="updateTextInput(this.value, 'dropTextField');">
    <input type="number" id="dropTextField" min="0" max="100" step=".01" name="drop" value="" onchange="updateTextInput(this.value, 'dropRange');"> 
    <br>
    <label>Percent raised after drop: </label>
    <!-- <input type="number" name="raise" value="{{ request.form['raise'] }}""> -->
    <input type="range" id="raiseRange" min="0" max="200" step=".01" value="{{ request.form['raise'] }}" onchange="updateTextInput(this.value, 'raiseTextField');">
    <input type="number" name="raise" id="raiseTextField" min="0" max="200" step=".01" value="" onchange="updateTextInput(this.value, 'raiseRange');">
    <br>
    <button type="submit">Submit</button>
</form>

{% if value %}
<p>{{'%0.2f' % value[0]|float}} will drop to {{'%0.2f' % value[1]|float}} and then go back up to {{'%0.2f' % value[2]|float}} a difference of {{'%0.2f' % (value[0] - value[2])|float}} ({{'%0.2f' % ((value[0]-value[2])/value[0] * 100)|float}}% of original value)</p>
<p>To get back to the original value the dropped value would need to go up by {{'%0.2f' % value[3]|float}}%</p>
{% endif %}
{% endblock %}