{{ extends 'global/Page.html' }}
{{ block title }}Risk Lottery{{ endblock }}

{{ block content }}

<p style="font-size: 1.1em; margin-bottom: 20px;">
In this section, you will make a series of decisions between two options: a guaranteed payoff and a lottery with a potential higher reward but also a chance of earning nothing. At the end of the study, one of your choices from this section will be randomly selected to determine your payment for this task. Please consider each decision carefully and choose the option that best reflects your preferences.
</p>
<form method="post">
    <table style="width: 100%; border-spacing: 15px;">
        <tr>
            <th>Decision</th>
            <th>Option A</th>
            <th>Option B</th>
        </tr>
        {% for decision in decisions %}
        <tr>
            <td style="text-align: center;">{{ decision.index }}</td>
            <td>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <input type="radio" name="decision_{{ decision.index }}" value="A" required>
                    <div style="width: 40px; height: 40px; border-radius: 50%; background: {{ decision.css_gradient }};"></div>
                    <span>${{ decision.lottery_a_hi }} with probability {{ decision.prob_fraction }}, ${{ decision.lottery_a_lo }} otherwise</span>
                </div>
            </td>
            <td>
                <div style="display: flex; align-items: center; gap: 10px;">
                    <input type="radio" name="decision_{{ decision.index }}" value="B" required>
                    <div style="width: 40px; height: 40px; border-radius: 50%; background: {{ decision.css_gradient }};"></div>
                    <span>${{ decision.lottery_b_hi }} with probability {{ decision.prob_fraction }}, ${{ decision.lottery_b_lo }} otherwise</span>
                </div>
            </td>
        </tr>
        {% endfor %}
    </table>
    <button type="submit" class="btn btn-primary">Next</button>
</form>


{{ endblock }}