{% block title %}

        <p class="center"> <b>New other Participant's Guess</b> </p>


{% endblock %}
{% block content %}

           <style>
                 body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 18px;
    }

        .center {
          text-align: center;
        }
        </style>



        <br>
        <br>

    <style>
    /* CSS code goes here */
    .information-box {
        background-color: #e6f2ff; /* backround color */
        border: 2px solid darkblue; /* border thickness and color */
        border-radius: 10px;  /* rounded borders */
        padding: 10px;
        width: 43%;
        margin-top: 40px;
    }
    .information-box-header {
        color: darkblue;
        font-weight: bold;
        margin-bottom: 5px;
        margin-bottom: 10px;
    }
    .information-box-content {
       /* font-style: italic; */
        color: black;
    }
    </style>
    <style>
    .information-box2 {
        background-color: #ffccd1; /* backround color */
        border: 2px solid darkred; /* border thickness and color */
        border-radius: 10px;  /* rounded borders */
        padding: 10px;
        width: 43%;
        margin-top: 40px;
    }
    .information-box2-header {
        color: darkred;
        font-weight: bold;
        margin-bottom: 5px;
        margin-bottom: 10px;
    }
    .information-box2-content {
       /* font-style: italic; */
        color: black;
    }
    </style>

<div style="background-color: lightgray; border: 1px solid black; padding: 10px; margin-bottom: 50px">
    <div style="background-color: lightgray; padding: 10px;">
        <b>Your initial guess:</b> The proportion of blue balls in the urn is {{ player.guess }}%.
    </div>
    <div style="background-color: darkgray; padding: 10px;">
        <b>New other Participant's guess:</b> The proportion of blue balls in the urn is {{ player.pista2 }}%.
    </div>
</div>







 <div class="container" id="keepContainer" style="display: none;">

<button id="button" type="button" class="btn btn-success btn-sm" onclick="KeepGoing()">Continue</button>

 </div>

<script>
    setTimeout(function() {
        document.getElementById("keepContainer").style.display = "block";
    }, 2000); // 3000 milliseconds = 3 seconds
</script>



<script>

// Define a function to show the hint text and the question field
    function KeepGoing() {



        document.getElementById("id_updguess_container").style.display = "block"; // Show the question field
        document.getElementById("next_button").style.display = "block";

    }
</script>
   <style>
    #id_updguess_container {
        display: none;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    </style>

       <div id="id_updguess_container">
    {{ formfield "upd_guess" }}
</div>

   <div class="container" id="keepContainer">
<button id="next_button" type="submit" class="btn btn-primary btn-sm" style="display:none;">Next</button>
</div>


<!-- All this code is to ensure that if there are errors in upd_guess that is a FloatField
 the previous animations will say there unchanged, and the user will observe a subtle message
 below the formfield-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // Add event listener for form submission
    $("form").on("submit", function(e) {
      e.preventDefault(); // Prevent the form from being submitted

      // Clear any existing error messages
      $(".error-message").remove();

      // Perform custom error handling
      var updGuessField = $("#id_upd_guess");
      var updGuessValue = updGuessField.val();

      if (updGuessValue < 0 || updGuessValue > 100) {
        // Display error message below the form field
        var errorMessage = $("<p>")
          .addClass("error-message")
          .text("Please enter a number between 0 and 100")
          .css({
            color: "red",
            margin: "5px 0",
          });

        updGuessField.after(errorMessage);
      } else {
        // Submit the form if there are no errors
        $(this).unbind("submit").submit();
      }
    });
  });
</script>
<style>
  .error-message {
    font-style: italic;
  }
</style>
<!-- End of customization of error message-->


       <div class="container" id="keepContainer">
<button id="next_button" type="submit" class="btn btn-primary btn-sm" style="display:none;">Next</button>
</div>



{% endblock %}