{{ extends 'global/Page.html' }}
{{ block title }}Experiment Complete{{ endblock }}

{{ block content }}
<script src="{{ static 'qrcode.min.js' }}"></script>

<div style="max-width: 600px; margin: auto; text-align: center;">

  <h3>Thank you for participating!</h3>

  <table style="margin: 20px auto; font-size: 1.1em; border-collapse: separate; border-spacing: 20px 6px;">
    <tr>
      <td>Total earnings (points):</td>
      <td style="font-weight:bold;">{{ total_pts }}</td>
    </tr>
    <tr>
      <td>Earnings from decisions:</td>
      <td style="font-weight:bold;">${{ earnings_usd }}</td>
    </tr>
    <tr>
      <td>Participation fee:</td>
      <td style="font-weight:bold;">${{ participation_fee }}</td>
    </tr>
    <tr>
      <td><strong>Total payment:</strong></td>
      <td style="font-weight:bold; font-size:1.2em;">${{ total_usd }}</td>
    </tr>
  </table>

  <p>Scan the QR code below with your phone to request your payment via Venmo:</p>

  <div id="qrcode" style="display:inline-block; padding:12px; background:white; border:1px solid #ccc; border-radius:8px;"></div>

  <p style="margin-top:10px; font-size:0.9em; color:#555;">
    Amount: <strong>${{ total_usd }}</strong>
  </p>

</div>

<script>
  new QRCode(document.getElementById("qrcode"), {
    text:         "{{ venmo_url }}",
    width:        220,
    height:       220,
    correctLevel: QRCode.CorrectLevel.M
  });
</script>
{{ endblock }}