{% 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 2{% 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">
                                90%: 1.60 EUR<br>
                                10%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery10' %}
                            </td>
                            <td class="lottery-a">
                                90%: 0.10 EUR<br>
                                10%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                80%: 1.60 EUR<br>
                                20%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery20' %}
                            </td>
                            <td class="lottery-a">
                                80%: 0.10 EUR<br>
                                20%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                70%: 1.60 EUR<br>
                                30%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery30' %}
                            </td>
                            <td class="lottery-a">
                                70%: 0.10 EUR<br>
                                30%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                60%: 1.60 EUR<br>
                                40%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery40' %}
                            </td>
                            <td class="lottery-a">
                                60%: 0.10 EUR<br>
                                40%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                50%: 1.60 EUR<br>
                                50%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery50' %}
                            </td>
                            <td class="lottery-a">
                                50%: 0.10 EUR<br>
                                50%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                40%: 1.60 EUR<br>
                                60%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery60' %}
                            </td>
                            <td class="lottery-a">
                                40%: 0.10 EUR<br>
                                60%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                30%: 1.60 EUR<br>
                                70%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery70' %}
                            </td>
                            <td class="lottery-a">
                                30%: 0.10 EUR<br>
                                70%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                20%: 1.60 EUR<br>
                                80%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery80' %}
                            </td>
                            <td class="lottery-a">
                                20%: 0.10 EUR<br>
                                80%: 3.85 EUR
                            </td>
                        </tr>
                        <tr>
                            <td class="lottery-b">
                                10%: 1.60 EUR<br>
                                90%: 2.00 EUR
                            </td>
                            <td class="formfield">
                                {% formfield 'Lottery90' %}
                            </td>
                            <td class="lottery-a">
                                10%: 0.10 EUR<br>
                                90%: 3.85 EUR
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
<center>{% next_button %}</center>


{% endblock %}