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

{{ block title }}
    First Mover's Decision
{{ endblock }}

{{ block content }}
{# APP: oath_follower (Second Mover) | FILE: Leaders_oath.html #}
{# FILE: Leaders_oath.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;
  }

  .oath-box {
    border: 2px solid #000;
    padding: 16px;
    margin: 16px auto 20px auto;
    max-width: 700px;
    min-height: 150px;
    font-size: 1.2rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .estimate-section {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin: 30px auto;
    max-width: 700px;
    border-radius: 5px;
  }
</style>




<div style="background-color: #e7f3ff; border: 2px solid #0066cc; padding: 20px; margin: 20px auto; max-width: 700px; border-radius: 5px; text-align: center;">
    <p style="font-size: 1.1rem; font-weight: bold; margin: 0;">You have been chosen to be a Second Mover.</p>
</div>

{{ if oath_text }}
<p>The First Mover had to decide whether to take the following oath:</p>

<div class="oath-box" id="oath-text">
  {{ oath_text }}
</div>

{{ if first_took_oath }}
  <p><b>The First Mover chose to TAKE the oath.</b></p>
{{ else }}
  <p><b>The First Mover chose to NOT TAKE the oath.</b></p>
{{ endif }}
{{ endif }}


    <p><b>Contribution of the First Mover</b></p>

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

    <p>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>

    {{ formfields }}


<p>After submitting your estimate, you will see the First Mover's actual contribution and make your own decision.</p>

<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 }}