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

{{ block title }}
    Sign the Oath
{{ endblock }}

{{ block content }}
{# APP: oathexp (First Mover) | FILE: Oath_take.html #}

<style>
  .oath-box {
    border: 2px solid #000;
    padding: 16px;
    margin: 16px auto 20px auto;
    max-width: 700px;
    min-height: 100px;
    font-size: 1.2rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
    user-select: none;
    -webkit-user-select: none;
  }
</style>

<p><strong>Please read the oath below carefully:</strong></p>

<div class="oath-box" id="oath-text">
    "{{ oath_text }}"
</div>

<p>Please type the oath displayed above into the form below.</p>

{{ formfield 'typed_oath' }}

<p style="margin-top: 16px;">
    Please sign the oath by typing the first letter of your name below.
</p>

{{ formfield 'typed_initials' }}

<div style="text-align: right;">{{ next_button }}</div>

<script>
  // ── Copy/paste protection on the oath box and typed_oath field ──
  const oathBox = document.getElementById('oath-text');
  if (oathBox) {
    oathBox.addEventListener('copy', function(e) {
      e.preventDefault();
      alert("Please type the oath manually.");
    });
    oathBox.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
  }

  const oathField = document.querySelector('input[name="typed_oath"], textarea[name="typed_oath"]');
  if (oathField) {
    oathField.addEventListener('paste', function(e) {
      e.preventDefault();
      alert("Please type the oath manually.");
    });
    oathField.addEventListener('drop', function(e) {
      e.preventDefault();
    });
  }
</script>

{{ endblock }}