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

{% block styles %}
<style>
    .lottery-a {
        min-width: 160px;
        text-align: right;
    }

    .lottery-b {
        min-width: 160px;
        text-align: left;
    }

    .formfield {
        min-width: 80px;
        text-align: center;
    }

    .header {
        background-color: #e9e9e9;
        border: 1px solid #dee2e6;
    }
</style>
{% endblock %}

{% block title %}Lottery choice tasks 1{% endblock %}

{% block content %}
{% include Constants.instructions_template %}

            <div class="card">
                <table class="table table-striped">
                    <thead>
                        <tr class="header">
                            <th class="lottery-b">Option A </th>
                            <th class="formfield"> Which lottery would you like to choose?</th>
                            <th class="lottery-a">Option B </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td class="lottery-b">
                                100%: 10 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Binary_lottery_choice1' %}
                            </td>
                            <td class="lottery-a">
                                90%: 12 EUR<br>
                                10%:  &nbsp;&nbsp;0 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                10%: 10 EUR<br>
                                90%: &nbsp;&nbsp;0 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Binary_lottery_choice2' %}
                            </td>
                            <td class="lottery-a">
                                9%: 12 EUR<br>
                                91%:&nbsp;&nbsp; 0 EUR
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>


<center>{% next_button %}</center>

{% endblock %}