{{ block title }}
    The task
{{ endblock }}


{{ block content }}

<p>You have been assigned to yellow</p>

<label class="col-form-label">
    At a price of ${{Constants.security_price}} per unit of security,
    and with each unit reducing the chance of successful thefts by <p id="efficacy"> %, how much security would you like to purchase from your endowment of {{Constants.endowment}}?
</label>

<div class="input-group">
    <label class="float-left">0</label><input type="range" name="security_consumed" min="0" max="25" id= "myRange" step="1" class="form-range">
    <label class="float-right">25</label>
</div>

<p> Purchasing <b><span id="security_consumed" ></span></b> units of security.</p>

<p> you will spend ****$,  with ###$ remaining</p>

You will reduce your likelihood of being successfully attacked by <p id="protection"></p> % to <p id="new_prob"></p>


<p>  An attack against you (stealing {{Constants.lost_from_attacks}}$) will have a *****% chance of being successful.  </p>

<script>
let efficacy = js_vars.efficacy * 100;      // import and transform constants
let theft_success = js_vars.theft_success * 100;

document.getElementById("efficacy").innerHTML = efficacy;       // pass constants to html
document.getElementById("theft_success").innerHTML = theft_success;

document.getElementById('security_consumed').value;  // access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content:

let slider = document.getElementById("myRange");
let output = document.getElementById("security_consumed");
let protection = document.getElementById("protection");
let new_prob = document.getElementById("new_prob");

output.innerHTML = slider.value; // without this, the text field for the slider starts empty
(protection.innerHTML =slider.value * efficacy);
(new_prob.innerHTML= theft_success- slider.value * efficacy);

slider.oninput = function() {
  output.innerHTML = this.value;
  (protection.innerHTML =this.value * efficacy);
  (new_prob.innerHTML= theft_success- this.value * efficacy);
}

</script>


    {{ next_button }}

{{ endblock }}