{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
 #14 Your partner's identity will be revealed at the end of the study.
{% endblock %}


{% block content %}

<div class="card bg-light instructions">
    <div class="card-body">

        <h10> <b> You are P1:
        Now you are playing with someone whose identity will be revealed to you after the study. They will also
          know who you are </b>

    </h9>
    <p></p>
    <p>
         Any amount
        you send to P2 for investment will be <u>tripled</u>. <b>In addition, you can request back any amount from P2 as long as it is not more than
            the tripled amount P2 will receive.</b> <p></p>

       <b> At the end of the study, we will randomly select 10 people and if any of them refused
           to send back the requested by their partners(i.e. they deviate), we will fine them.</b>
        The fine will be used to pay you the difference <u>if your P2 deviates and is selected.</u>
        <p></p>

        </b>

       <!-- <b> You will earn</b>: The {{Constants.endowment}} you have, minus what
        you send P2 plus what he/she sends you back <u>plus the fine if your P2 is selected.</u> <p></p>

        <b>P2 will earn </b> : The {{Constants.endowment}} he/she has, plus 3 times what you
        send him/her, minus what he sends back to you and <u> the fine if he/she
        is selected.</u>
        Given this information, how much
        would you like to send P2? -->

    </p>

        {% formfields %} out of the tripled amount.
       <p>

    </p>

</div>
</div>
               <p></p>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Next
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Please confirm your decision </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p> Is this your final decision?
	<tr>
	<td  id=“lane”></td></p>
	</tr>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
        <button class="btn btn-primary">Yes</button>
      </div>
    </div>
  </div>
</div>
</div>
</div>



 <script src="{% static "COP_Experiment/Basic.js" %}"></script>


{% endblock %}