{{ extends "global/Page.html" }}
{{ block title }}Introduction{{ endblock }}

{{ block content }}

<style>
  .page-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
  }
  .page-title    { font-size: 22px; }
  .page-subtitle { font-size: 16px; }
  .page-label    { font-size: 15px; }
  .page-input    { font-size: 15px; }
  .page-footer-text { font-size: 15px; }

  .page-submit-error {
    display: none;
    color: #dc2626;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    font-size: 14px;
  }

  .required-question.question-missing {
    border: 2px solid #dc2626 !important;
    border-radius: 8px;
    background: #fff7f7 !important;
  }

  .required-question.question-missing .page-label {
    color: #dc2626 !important;
  }

  @media (min-width: 768px) {
    .page-wrapper {
      max-width: 100%;
      padding: 3rem 4rem;
    }
    .page-title        { font-size: 28px; }
    .page-subtitle     { font-size: 19px; }
    .page-label        { font-size: 18px; }
    .page-input        { font-size: 17px; max-width: 480px !important; }
    .page-footer-text  { font-size: 17px; }
    .page-submit-error { font-size: 16px; }
  }
</style>

<div class="page-wrapper">

  <div style="margin-bottom: 2rem;">
    <h1 class="page-title" style="font-weight: 500; margin: 0 0 0.5rem;">Welcome to this experiment</h1>
    <p class="page-subtitle" style="color: #6b7280; margin: 0; line-height: 1.6;">You will play a series of games with other participants.</p>
  </div>

  <div
    id="question-identifier"
    class="required-question"
    style="margin-bottom: 2rem; padding: 0.75rem; margin-left: -0.75rem;"
  >
    <label class="page-label" style="display: block; font-weight: 500; margin-bottom: 0.5rem;">
      Please, enter your nickname for the reward:
    </label>
    <input
      type="text"
      id="identifier-input"
      name="identifier_openEnded"
      class="page-input"
      style="width: 100%; max-width: 340px; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; box-sizing: border-box; font-family: inherit; color: #111827;"
      placeholder="Nickname"
    />
  </div>

  <div style="border-top: 1px solid #e5e7eb; padding-top: 1.5rem;">
    <p id="page-submit-error" class="page-submit-error">
      Please enter your nickname.
    </p>

    <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
      <p class="page-footer-text" style="color: #6b7280; margin: 0;">When you're ready, click to begin.</p>
      {{ next_button }}
    </div>
  </div>

</div>

<script>
(function () {
  var form = document.querySelector('form');
  var input = document.getElementById('identifier-input');
  var question = document.getElementById('question-identifier');
  var error = document.getElementById('page-submit-error');

  if (!form || !input) return;

  form.setAttribute('novalidate', 'novalidate');

  function reEnableNextButton() {
    var nextButton = document.querySelector(
      'form button[type="submit"], form input[type="submit"]'
    );

    if (!nextButton) return;

    nextButton.disabled = false;
    nextButton.removeAttribute('disabled');
    nextButton.classList.remove('disabled');
  }

  function isAnswered() {
    return input.value.trim() !== '';
  }

  input.addEventListener('input', function () {
    if (!isAnswered()) return;

    question.classList.remove('question-missing');
    error.style.display = 'none';
  });

  form.addEventListener('submit', function (event) {
    if (isAnswered()) return;

    event.preventDefault();
    event.stopImmediatePropagation();
    reEnableNextButton();
    setTimeout(reEnableNextButton, 0);

    question.classList.add('question-missing');
    error.textContent =
      'Please enter your nickname.';
    error.style.display = 'block';
  }, true);
})();
</script>

{{ endblock }}