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

{{ block title }}
    Estimate about the Other Second Mover
{{ endblock }}

{{ block content }}
{# APP: oath_follower (Second Mover) | FILE: SecondMoverGuess.html #}
{# FILE: SecondMoverGuess.html #}

<style>
  .instructions-toggle {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    margin: 20px auto;
    display: block;
  }

  .instructions-toggle:hover {
    background-color: #0056b3;
  }

  .instructions-content {
    display: none;
    background-color: #f8f9fa;
    border: 2px solid #007bff;
    padding: 20px;
    margin: 20px auto;
    max-width: 900px;
    border-radius: 5px;
  }

  .instructions-content.show {
    display: block;
  }

  .estimate-section {
    max-width: 900px;
    margin: 30px auto;
    padding: 30px;
    background-color: #ffffff;
    border: 2px solid #0066cc;
    border-radius: 8px;
    text-align: left;
  }

  .estimate-section h4 {
    color: #0066cc;
    margin-bottom: 20px;
  }

  .info-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin: 20px auto;
    max-width: 900px;
    border-radius: 5px;
  }
</style>



<div class="estimate-section">
    <p>There is one other Second Mover in your group who observed the same information about the First Mover that you did.</p>

    <p>We ask you to estimate how many tokens the other Second Mover has contributed.</p>

    <p>If you estimate the correct amount, you will receive <b>4 extra tokens</b>. If you do not estimate the correct amount, you will receive no extra tokens.</p>

    {{ formfields }}
</div>


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

<button type="button" class="instructions-toggle" onclick="toggleInstructions()">
    Show/Hide Instructions
</button>

{% include 'oath_follower/instructions.html' %}

<script>
function toggleInstructions() {
    const instructions = document.getElementById('instructions');
    instructions.classList.toggle('show');
}
</script>

{{ endblock }}