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

{{ block title }}
    Estimates about the Second Movers
{{ endblock }}

{{ block content }}
{# APP: oathexp (First Mover) | FILE: Beliefs.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;
  }
</style>

<p><b>Contributions of the Second Movers</b></p>
<p>
    There will be two Second Movers who will observe your contribution and whether you took the oath.
    They will choose how much to contribute.
</p>
<p>
    We ask you to estimate the average number of tokens each Second Mover will contribute (between 0 and 20 tokens).
    If you estimate the correct amount, you will be paid <b>4 extra tokens</b>.
    If you do not estimate the correct amount, you will receive no extra tokens.
</p>

{{ formfield 'leader_belief_1' }}

<br>

<p><b>Estimates of the Second Movers</b></p>
<p>
    The two Second Movers in your group will be asked how many tokens they think you contributed.
    When submitting their estimates, they will know whether you took the oath, but not how much you contributed.
</p>
<p>
    How many tokens do you think the Second Movers expect you to contribute?
    If you estimate the correct amount, you will be paid <b>4 extra tokens</b>.
    If you do not estimate the correct amount, you will receive no extra tokens.
</p>

{{ formfield 'leader_belief_2' }}

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

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

{{ include 'oathexp/instructions.html' }}

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

{{ endblock }}