{{ block content }}
<p>
    <p style="font-size:20px;">Your payoff is {{player.payoff}}  and receive it four weeks later.</p>
</p>
<p>
    You need to come here for picking up the payoff at Room 00.012, 10:00~12:00 AM or 13:30~16:00 PM four weeks later (xx/xx/2023).
</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</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 }}