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

{% block title %}
    Option 2 (the amount)
{% endblock %}

{% block content %}


<div class="bg-light my-3 px-3 py-3 rounded border">
    <div class="row">
        <div class="col-6">    
            <p>
                <strong> Option 2 </strong> is a <strong> safe amount of money</strong>. 
                An example is shown on the right. 
                If you choose Option 2, your bonus will be the amount of money 
                shown to you.  
            </p>
        </div>
        
        <div class="col-6">    
            <table class="table table-bordered border-dark" style="background-color: white">
                <tbody>
                    <tr>
                        <td id="option2">
                            <div id="emptyAmount" class="d-flex align-items-center justify-content-center"
                                style="
                                width: 100%;
                                left: 0px;
                                top: 0px;
                                margin: 0 auto;
                                font-size: 500%;
                                font-weight: 200;"
                            >    
                            {{fixedAmount}}
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    
    <button id="next_page_btn" 
        class="btn btn-primary mt-2"
        >
        Got it. Option 1 is risky and Option 2 is
        safe. Let's start now!
    </button>
</div>

{% if testing %}
    {{ formfield 'feedback_option2' }}
{% endif %}


{% endblock %}