{% block title %}
Which do you prefer?
{% endblock %}

{% block content %}

{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

    <p>
        For each line, choose which option you prefer.
        Make these decisions carefully; we may randomly select one of the lines and implement your choice.
    </p>


    <table class="table">
        <thead>
            <tr class="header">
                <th class="lottery-a">Option A</th>
                <th class="formfield"></th>
                <th class="lottery-b">Option B</th>
            </tr>
        </thead>

        <tbody>
            {% for field, g, b, f in lotteries %}
                <tr>
                    <td class="lottery-a">
                        <strong>{{ g }}</strong> with 50% chance and <br/>
                        <strong>{{ b }}</strong> with 50% chance
                    </td>
                        <td class="formfield">
                            <input type="radio" name="{{ field }}" value="1" required>
                            <input type="radio" name="{{ field }}" value="2" required>
                        </td>
                    <td class="lottery-b">
                        <strong>{{ f }}</strong> for sure
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <p>
        When you are ready, continue to the next page.
    </p>


<button style="float: right" class="btn btn-primary btn-large">Next</button>

{% endblock %}

{% block styles %}
<link href="{% static 'lottery/custom.css' %}" rel="stylesheet">
{% endblock %}

{% block scripts %}

{% endblock %}