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

{% block styles%}
    <style>
        .gamble{
            border: 0.5px solid;
            border-radius: 50%;
            height: 80px;
            width: 100px;

        }
        .choices_high{     
            border-right: 0.5px solid;
            float: left;
            height: 80px;
            width: 50%;
            text-align: center;
            padding-top: 25px;
        }

        .choices_low{
            float: right;
            width: 50%;
            text-align: center;
            padding-top: 25px;
        }
    </style>
{% endblock %}


{% block title %}
    Decision
{% endblock %}

{% block content %}
    <p>
        You must select <b>one and only one</b> of these gambles. To select a gamble, please type the gamble choice that you prefer into the box. <b>Select only one.</b>
    </p>

    <p>
        When you are ready please enter the gamble option (1, 2, 3, 4, 5, or 6) that you prefer. Remember, there are no right or wrong answers; you should just select the option that you like the best.
    </p>

    {% formfield player.gamble_choice label="Value"%}

    <div class="row">
        <div class="col-md-3 item">
        </div>
        <div class="col-md-3 item">
            <div class="gamble">
                <div class="choices_high">{{Constants.gamble_choices.1.0|floatformat:2}}</div>
                <div class="choices_low">{{Constants.gamble_choices.1.1|floatformat:2}}</div>
            </div>
            <br>
            <p>Gamble Choice 1</p>
        </div>
    
        <div class="col-md-3 item">
            <div class="gamble">
                    <div class="choices_high">{{Constants.gamble_choices.2.0|floatformat:2}}</div>
                    <div class="choices_low">{{Constants.gamble_choices.2.1|floatformat:2}}</div>
            </div>
            <br>
            <p>Gamble Choice 2</p>
        </div> 
        <div class="col-md-3 item">
        </div>
    </div>

    <div class="row">
        <div class="col-md-3 item">
            <div class="gamble">
                <div class="choices_high">{{Constants.gamble_choices.6.0|floatformat:2}}</div>
                <div class="choices_low">{{Constants.gamble_choices.6.1|floatformat:2}}</div>
            </div>
            <br>
            <p>Gamble Choice 6</p>
        </div>
        <div class="col-md-3 item">
        </div>
        <div class="col-md-3 item">
        </div>
          
        <div class="col-md-3 item">
                <div class="gamble">
                    <div class="choices_high">{{Constants.gamble_choices.3.0|floatformat:2}}</div>
                    <div class="choices_low">{{Constants.gamble_choices.3.1|floatformat:2}}</div>
                </div>
                <br>
                <p>Gamble Choice 3</p>
            </div>
    </div>
    
    <div class="row">
        <div class="col-md-3 item">
        </div>
        <div class="col-md-3 item">
            <div class="gamble">
                <div class="choices_high">{{Constants.gamble_choices.5.0|floatformat:2}}</div>
                <div class="choices_low">{{Constants.gamble_choices.5.1|floatformat:2}}</div>
            </div>
            <br>
            <p>Gamble Choice 5</p>
        </div>
        <div class="col-md-3 item">
            <div class="gamble">
                <div class="choices_high">{{Constants.gamble_choices.4.0|floatformat:2}}</div>
                <div class="choices_low">{{Constants.gamble_choices.4.1|floatformat:2}}</div>
            </div>
            <br>
            <p>Gamble Choice 4</p>
        </div>
       
        <div class="col-md-3 item">
        </div>
    </div>
    


    <br>


    {% next_button %}
{% endblock %}