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

{{ block content }}

<p>
    The product is <b>{{ product_description }}</b>.
</p>

<img src="{{ static product_img }}" style="max-width: 400px; max-height: 250px"/>

<table class = "table w-100">
    <tr>
        <th>Question #</th>
        <th> </th>
        <th>Option A</th>
        <th> </th>
        <th>Option B</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Would you rather have:</td>
        <td> Product </td>
        <td>or</td>
        <td>$0.01</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Would you rather have:</td>
        <td> Product </td>
        <td>or</td>
        <td>$0.02</td>
    </tr>
    <tr>
        <td><span>&#8942;</span></td>
        <td><span>&#8942;</span></td>
        <td><span>&#8942;</span></td>
        <td><span>&#8942;</span></td>
        <td><span>&#8942;</span></td>
    </tr>
    <tr>
        <td>999</td>
        <td>Would you rather have:</td>
        <td> Product </td>
        <td>or</td>
        <td>$9.99</td>
    </tr>
    <tr>
        <td>1,000</td>
        <td>Would you rather have:</td>
        <td> Product </td>
        <td>or</td>
        <td>$10.00</td>
    </tr>
</table>

{{ formfield 'decision' label="<b>At which dollar value ($) would you switch?</b>"}}
<p>
    <i>Note: The value will be automatically rounded to two decimal places.</i>
</p>

<button class="otree-btn-next btn btn-primary">Submit</button>

{{ endblock }}