{{ block styles}}
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
body {font-family: Arial, Helvetica, sans-serif;}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>

{{ endblock}}



{{ block title }} Results {{ endblock }}


{{ block content }}
    <p>
    You have reached the end of the session. Thank you for your participation.
    </p>
    
    <p>
    Image {{ round_num }} from Block {{ part_num }} was randomly selected for payment. 
    The possible bonus payment is ${{ amount_paid }}.
    Here is the image, and it is {{ answer }}.
    </p>
    <img src="{{ static image_path }}" />

    

    {% if player_input >= 0 %}
    <br><br>
    <p>
    As a reminder, for this image you chose that the probability it is {{ category1 }} 
    is {{ player_input }}% and the probability it is {{ category2 }} is {{ player_input_other }}%
    Therefore, <b>your probability of getting the bonus payment of ${{ amount_paid }} given 
    the payment rule we are using is {{ prob }}%</b>. 
    </p>
    
    {% else %}
    <p>
    As a reminder, for this image, you did not enter anything because you ran 
    out time before submitting a probability.
    Therefore, <b>your probability of getting the bonus payment of ${{ amount_paid }} was 0%</b>. 
    </p>
    

    {% endif %}
    
    <p>
    If you click the button below, you can see how the payment rule works 
    and why truthfully telling your belief of the probability leads to maximizing 
    your likelihood of getting the bonus payment.
    </p>


<!-- Button trigger modal -->
<button type="button" onclick="liveSend('clicked-button')" id= "myBtn" class="btn btn-primary btn-large" data-toggle="modal" data-target="#exampleModalI">Payment Rule</button>

<br><br>

<p>
<b> Please go to the next page to determine your final payment.</b>
</p>


<br><br>
{{ next_button }}


<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalILabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h3>
      How do we determine your payoff?
      </h3>
        <span class="close">&times;</span>
      </div>
      <div class="modal-body">
	    {{ include C.BSR }}
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
  </div>
</div>



<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}


</script>



{{ endblock }}