{{ block content }}
<p>
    <p style="font-size:20px;">In Experiment I, your payoff is € {{player.payoff_ming}}, and you will receive it four weeks later.</p>
<p>
    You need to come here for picking up the payoff of Experiment I at Room 00.012, 10:00~12:00 AM or 13:30~16:00 PM four weeks later.
</p>
    <p style="font-size:20px;">In Experiment II, your payoff is € {{player.payoff_zhang}}, and you will receive it at the end of the experiment (today).</p>
Please complete the receipt with today's payment.
</p>

 <b>Payment ID:</b>
    <h4>
       <div id="code" style="width: 200px; height: 50px; background-color: #D8D8D8 ; padding: 10px; border: 1px grey; text-align: center;">
          <b>{{player.payment_id_m }} </b>
       </div>
    </h4>


<button
       type="button"
       id="copy"
       class="btn btn-primary mt-2"
       onclick="CopyToClipboard('code');"
       >
    Copy ID
    </button>
<br><br>
    Payment survey link:<br>
    <a href="https://limesurvey.urz.uni-heidelberg.de/index.php/823382?lang=en" target="_blank">Click Here to Proceed to the Payment Survey. Click Here to Proceed to the Payment Survey. We can send emails
     for reminding you to pick up your money four weeks later.</a>
    <br><br>
{{ endblock }}

{{block scripts}}
    <script>
       function CopyToClipboard(containerid) {
         if (document.selection) {
           var range = document.body.createTextRange();
           range.moveToElementText(document.getElementById(containerid));
           range.select().createTextRange();
           document.execCommand("copy");
         } else if (window.getSelection) {
           var range = document.createRange();
           range.selectNode(document.getElementById(containerid));
           window.getSelection().addRange(range);
           document.execCommand("copy");
           alert("Text has been copied to clipboard, please paste it in the payment survey")
         }
       }

    </script>
{{ endblock }}