{% load otree %}

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">More information</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

          <p>The <b>delegation of the estimation to the algorithm costs a randomly determined price (between {{ player.wtpzero }} and {{ player.wtpmaxcu }})</b>, which is not known beforehand. </p>

            <p> If your willingness to pay for the delegation is higher than the randomly selected price, you pay the randomly selected price and the algorithm estimates the GDP per capita for you. This price will be subtracted from the profit you make with this estimation.
                If your willingness to pay for the delegation is lower than the randomly selected price, you pay nothing and cannot delegate the estimation.
                In this case, you have to estimate the GDP per capita yourself.</p>

          <p>The probability that you can actually delegate the estimation to the algorithm increases with the amount you are willing to pay. You <b>maximise your profits by truthfully indicating your willingness to pay</b> for the delegation.</p>

          <br><br>

            The <b>profits</b> you can earn <b>depend</b> on the <b>accuracy</b> of your estimate compared to the actual GDP per capita and are as follows:

            <br><br>
            <table class="table" style="text-align: center">
                <tr>
                    <th style="text-align:center;  font-weight: bold; color: #185177" >Deviation from the actual GDP per capita:</th>
                    <th style="text-align:center;  font-weight: bold; color: #185177" >Profit</th>
                </tr>
                <tr>
                    <td> less than (or equal to) <b> 5 </b> points </td>
                    <td> {{ player.profit5 }} </td>
                </tr>
                <tr>
                    <td> less than (or equal to) <b> 10 </b> points </td>
                    <td> {{ player.profit4 }} </td>
                </tr>
                <tr>
                    <td> less than (or equal to) <b> 15 </b> points </td>
                    <td> {{ player.profit3 }} </td>
                </tr>
                <tr>
                    <td> less than (or equal to) <b> 20 </b> points </td>
                    <td> {{ player.profit2 }} </td>
                </tr>
                <tr>
                    <td> less than (or equal to) <b> 25 </b> points </td>
                    <td> {{ player.profit1 }} </td>
                </tr>
            </table>

        <br><br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>