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

{{ block title }}
    Your Oath Decision
{{ endblock }}

{{ block content }}
{# APP: oathexp (First Mover) | FILE: Oath.html #}

<style>
  .oath-box {
    border: 2px solid #000;
    padding: 16px;
    margin: 16px auto 20px auto;
    max-width: 700px;
    min-height: 100px;
    font-size: 1.2rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
    user-select: none;
    -webkit-user-select: none;
  }
</style>

<div class="contribution-reveal" 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 the First Mover.</p>
</div>

<p>
    Before you make your contribution decision,
    you may choose to take the following oath. The Second Movers will be informed of whether you took it.
</p>

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

{{ formfields }}

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

{{ endblock }}