{{ block title }}
    Scenario b
{{ endblock }}


{{ block content }}

<label class="col-form-label">
    For this scenario, an attempted theft will succeed <span style="font-size:25px;"> <u>60%</u> </span> of the time.
    Each unit of security costs <u><span style="font-size:25px;">$</span><span style="font-size:25px;" id="price"> </span></u>,
    and each unit reduces the chance of successful thefts by <span id="efficacy"> </span>%.
    A successful theft steals $<span id="lost_from_attacks" ></span> from you, and a failed attempt will make your partner lose
    $<span id="failed_attack" ></span>.</label>
<br><br>
<p>Use the slider below to indicate how much security you
    would purchase from a budget of $<span id="endowment" ></span>.</p>


<br><br>
<div style="width: 500px;margin: 0 auto; padding: 5px">
			<p style="float:left"><strong>0</strong></p>
			<p style="float:right"><strong>50 </strong></p>
			</div>

<div class="input-group" style="margin: 0 auto;">
    <input type="range" name="security_consumed" min="0" max="50" value="0" id= "myRange" step="1" class="form-range">
</div>


<br><br>
<p> Purchasing <strong><span id="security_consumed" ></span></strong> units of security. You will spend $<span class="fw-bold" id="paid"> </span> ,
    with $<span class="fw-bold"  id="money_left"></span> remaining</p>

<p>You will reduce your likelihood of being successfully attacked by <span class="fw-bold"  id="protection"></span>%</p>

<p>After your security purchase, <span class="fw-bold"  id="new_prob"></span>% of attempted attacks against you will be successful. </p>

<p> Once you are satisfied with your decision, please click the "next" button to move to the next page </p>




<script>

let efficacy = js_vars.efficacy * 100;      // import and transform constants
let price = js_vars.price;
let base_prob = js_vars.theft_success * 100;
let endowment = (Math.round(js_vars.endowment * 100) / 100).toFixed(2);
let lost_from_attacks = (Math.round(js_vars.lost_from_attacks * 100) / 100).toFixed(2);
let failed_attack = (Math.round(js_vars.failed_attack * 100) / 100).toFixed(2)

// create html objects from js_var
document.getElementById("efficacy").innerHTML = efficacy;       // pass constants to html for in-text  BRINGING PRICE OBJECT BREAKS ALL HTML ITEMS - removing "= efficacy" doesn't seem to break things
document.getElementById("endowment").innerHTML = endowment;
document.getElementById('security_consumed').value;
document.getElementById("price").innerHTML = price;
document.getElementById("lost_from_attacks").innerHTML = lost_from_attacks;
document.getElementById("failed_attack").innerHTML = failed_attack;

// create html objects for use in real-time updating values based on slider responses
let slider = document.getElementById("myRange");
let output = document.getElementById("security_consumed");
let protection = document.getElementById("protection");
let paid = document.getElementById("paid");
let new_prob = document.getElementById("new_prob");
let money_left = document.getElementById("money_left");

// without this, the text fields according to slider values start empty
output.innerHTML = slider.value;
(protection.innerHTML =Math.round((slider.value * efficacy)));  // this code rounds to a whole number
(paid.innerHTML = (Math.round(slider.value * price * 100) / 100).toFixed(2));
(new_prob.innerHTML = Math.round((base_prob - slider.value * efficacy)));
if(new_prob.innerHTML < 0){
    new_prob.innerHTML = 0
    protection.innerHTML = base_prob
}
(money_left.innerHTML = (Math.round((endowment - slider.value * price) * (10 ^ 2)) / (10 ^ 2)).toFixed(2));  // this code rounds to exactly two decimal places


// code for updating values based on slider
slider.oninput = function() {
  output.innerHTML = this.value;
  protection.innerHTML =Math.round(this.value * efficacy);
  paid.innerHTML = (Math.round(this.value * price * 100) / 100).toFixed(2);
  new_prob.innerHTML = Math.round(base_prob - this.value * efficacy);
  if(new_prob.innerHTML < 0){
    new_prob.innerHTML = 0
      protection.innerHTML = base_prob
  };
  money_left.innerHTML = (Math.round((endowment - this.value * price) * 100)  / 100).toFixed(2);
}

</script>


    {{ next_button }}

{{ endblock }}