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

{{ block title }}
    Your Contribution Decision
{{ endblock }}

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

  .contribution-reveal {
    background-color: #e7f3ff;
    border: 2px solid #0066cc;
    padding: 20px;
    margin: 20px auto;
    max-width: 700px;
    border-radius: 5px;
    text-align: center;
  }

  .contribution-amount {
    font-size: 2rem;
    font-weight: bold;
    color: #0066cc;
    margin: 10px 0;
  }

  .payoff-recap {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 20px;
    margin: 20px auto;
    max-width: 700px;
    border-radius: 5px;
  }

  .decision-section {
    max-width: 700px;
    margin: 30px auto;
    padding: 30px;
    background-color: #ffffff;
    border: 2px solid #28a745;
    border-radius: 8px;
    text-align: center;
  }

  .decision-section h4 {
    color: #28a745;
    margin-bottom: 20px;
  }

  .endowment-reminder {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
  }

  .otree-btn-next {
    float: right;
  }
</style>



<div class="contribution-reveal">
    <p style="font-size: 1.1rem; font-weight: bold; margin-bottom: 12px;">You have been chosen to be a Second Mover.</p>
    <p>The First Mover contributed:</p>
    <div class="contribution-amount">{{ first_contribution }} tokens</div>
</div>

<div class="decision-section">
    <h4>Your Decision</h4>

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