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

{% block title %}
{% endblock %}

{% block styles %}
<style>
  /* Hide oTree’s default countdown widget everywhere on this page */
  .otree-timer {
    display: none !important;
  }

  .custom-timer-top {
    margin: 0 0 10px 0;
    padding: 0;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }

  .custom-timer-number {
    font-size: 38px;
    color: red;
    font-weight: bold;
  }

  /* CHANGED: flashing animation for the warning */
  @keyframes flash-warning {
    0%,
    49% {
      opacity: 1;
    }

    50%,
    100% {
      opacity: 0;
    }
  }

  .timer-warning {
    margin-top: 6px;
    color: red;
    font-size: 22px;
    font-weight: bold;
    display: none;

    /* CHANGED: make the warning flash once per second */
    animation: flash-warning 1s step-start infinite;
  }
</style>
{% endblock %}

{% block content %}

{% if player.treatment == "pressure_new" %}
  <div class="custom-timer-top">
    Time remaining:
    <span id="custom-timer" class="custom-timer-number">10</span>
    seconds

    <!-- CHANGED: revised warning sentence -->
    <div id="timer-warning" class="timer-warning">
      Please make your decision now!
    </div>
  </div>
{% endif %}

<h2>Decision in the experiment</h2>

<p>
  <br>
  <b>You have been randomly chosen to be the FIRST MOVER in your group.</b>
</p>

<p>
  <br>
  You have an endowment of 20 Tokens.
</p>

{% if player.treatment == "pressure" %}

  <p>
    <br>
    <b>
      Please make your decision as quickly as possible. You must make your
      decision in less than 10 seconds!
    </b>
  </p>

  {% formfield player.un_contribution %}
  {% next_button %}

{% elif player.treatment == "pressure_new" %}

  <p>
    <br>
    <b>
      Please make your decision as quickly as possible. You must make your
      decision in less than 10 seconds!
    </b>
  </p>

  {% formfield player.un_contribution %}
  {% next_button %}

  <script>
  (function () {
    document.addEventListener('DOMContentLoaded', function () {
      var secondsLeft = 10;
      var timerDisplay = document.getElementById('custom-timer');
      var warning = document.getElementById('timer-warning');

      var countdown = setInterval(function () {
        secondsLeft -= 1;

        if (timerDisplay) {
          timerDisplay.textContent = secondsLeft;
        }

        if (secondsLeft <= 0) {
          clearInterval(countdown);

          if (timerDisplay) {
            timerDisplay.textContent = '0';
          }

          if (warning) {
            warning.style.display = 'block';
          }
        }
      }, 1000);
    });
  })();
  </script>

{% elif player.treatment == "delay" %}

  <p>
    <br>
    <b>
      Please carefully consider your decision. You must wait and think for at
      least 10 seconds before making your decision.
    </b>
  </p>

  <div id="delayed-form" style="display: none;">
    {% formfield player.un_contribution %}
    {% next_button %}
  </div>

  <script>
  (function () {
    var DELAY_MS = 10000;

    document.addEventListener('DOMContentLoaded', function () {
      var wrapper = document.getElementById('delayed-form');
      var submitBtn = document.querySelector('button[type="submit"]');

      if (submitBtn) {
        submitBtn.disabled = true;
      }

      setTimeout(function () {
        if (wrapper) {
          wrapper.style.display = '';
        }

        if (submitBtn) {
          submitBtn.disabled = false;
        }
      }, DELAY_MS);
    });
  })();
  </script>

{% endif %}

{% endblock %}