{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}Part 3 Instructions{% endblock %}

{% block content %}
    <p>In this part, you will make {{ Constants.num_choices }} choices between <strong>Option A</strong> and <strong>Option B</strong>.
    <ul>
        <li>Each row shows different probabilities and payoffs for the two options.</li>
        <li>After all 10 choices are made, one row will be randomly selected.</li>
        <li>Your payoff will depend on the outcome of that row.</li>
    </ul>
      <table class="table table-bordered" style="text-align: center">
            <thead>
            <tr class="header">
                <th class="lottery" style="width: 45%;">Option A</th>
                <th class="formfield"></th>
                <th class="sure_payoff" style="width: 45%;">Option B</th>
            </tr>
            </thead>

            <tbody>
            {% for f, px, py, payoffA_high, payoffA_low, payoffB_high, payoffB_low, a_sure, b_sure, choice in choices %}
            <tr>
                <!-- lotteries -->
                <td class="lottery-a" style="width: 45%;">
                    {% if a_sure %}
                        {{ payoffA_high | c }} for sure
                    {% else %}
                        {{ px }}% chance of {{ payoffA_high | c }}<br/>
                        {{ py }}% chance of {{ payoffA_low | c  }}
                    {% endif %}
                </td>

                                <td class="formfield">
                    <input type="radio" disabled>
                    <input type="radio" disabled>
                </td>
                <!-- sure payoff -->
                <td class="lottery-b" style="width: 45%;">
                    {% if b_sure %}
                        {{ payoffB_high | c }}
                    {% else %}
                        {{ px }}% chance of {{ payoffB_high | c  }}<br/>
                        {{ py }}% chance of {{ payoffB_low | c  }}
                    {% endif %}
                </td>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>



<p>Click the button below to begin making your choices.</p>

    <div style="text-align: center">
        <button type="submit" class="btn btn-primary">Start Task</button>
    </div>
{% endblock %}