{{ block title }}
    Section 2 of 3
{{ endblock }}
{{ block content }}

<div class="card">
    <div class="card-body">
        <p>
        For each row in the table below, which option would you prefer?
        </p>
        <table class="table">
            <colgroup>
                <col style="width:15%;">
                <col style="width:40%;">
                <col style="width:5%;">
                <col style="width:10%;">
                <col style="width:30%;">
            </colgroup>
            {{ for amount in trials }}
            <tr>
                <td style="text-align: right">
                    <input type="radio" name="{{ amount.id }}" value="1" required onclick="sendPref(this)">
                </td>
                <td style="text-align: left;">
                    A {{ amount.probability_percent }}% chance of {{ amount.lottery_high }},<br>
                    and a {{ amount.probability_percent }}% chance of {{ amount.lottery_low }}
                </td>
                <td style="text-align: left">
                    or
                </td>
                <td style="text-align: right">
                    <input type="radio" name="{{ amount.id }}" value="0" required onclick="sendPref(this)">
                </td>
                <td style="text-align: left">
                    {{ amount.sure_payoff }}
                </td>
            </tr>
            <tr>
            </tr>
            {{ endfor }}
        </table>
    </div>
</div>
<br>
<button class="btn btn-primary">>> </button>

<script>
    function sendPref(radio) {
        liveSend({trial_id: radio.name, chose_lottery: radio.value === '1'});
    }
</script>

{{ endblock }}