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

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

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

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

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

{{ if oath_text }}
    {{ if player.field_maybe_none('take_oath') }}
    <div class="contribution-reveal">
        <h4>You took the following oath:</h4>
        <div style="border: 2px solid #0066cc; padding: 15px; margin: 10px 0; background-color: white; text-align: center; font-size: 1.1rem; font-style: italic;">
            "{{ oath_text }}"
        </div>
    </div>
    {{ else }}
    <div style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 15px; margin: 20px auto; max-width: 700px; border-radius: 8px; text-align: center;">
        <p style="margin: 0;"><strong>You chose not to take the oath.</strong></p>
    </div>
    {{ endif }}
{{ else }}
    <div class="contribution-reveal">
        <p style="font-size: 1.1rem; font-weight: bold; margin: 0;">You have been chosen to be the First Mover.</p>
    </div>
{{ endif }}

<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 'oathexp/instructions.html' }}

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

{{ endblock }}