{% 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" name="drop" min="0" max="100" step="1" value="{{ request.form['drop'] }}" onchange="updateTextInput(this.value, this.name);">
    <input type="text" id="drop" value=""> 
    <br>
    <label>Percent raised after drop: </label>
    <!-- <input type="number" name="raise" value="{{ request.form['raise'] }}""> -->
    <input type="range" name="raise" min="0" max="200" step="1" value="{{ request.form['raise'] }}" onchange="updateTextInput(this.value, this.name);">
    <input type="text" id="raise" value="">
    <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>
{% endif %}
{% endblock %}

