{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Results
{% endblock %}

{% block content %}
    <p>The randomly chosen row is indicated below.</p>
    <p>Your payoff for this task:</strong> {{ player.payoff }}</p>



     <table class="table table-bordered" style="text-align: center">
            <thead>
            <tr class="header">
                <th class="lottery"> Option A</th>
                <th class="formfield"></th>
                <th class="sure_payoff">Option B</th>
            </tr>
            </thead>

            <tbody>
            {% for f, px, py, payoffA_high, payoffA_low, payoffB_high, payoffB_low,choice in choices %}
                        <tr {% if player.selected_row == forloop.counter %}class="table-success"{% endif %}>  <!-- Highlight the selected row -->
            <!-- Option A payoffs -->
                <!-- lotteries -->
                <td class="lottery-a">
                    {{ px }}% chance of {{ payoffA_high | c }}<br/>
                    {{ py }}% chance of {{ payoffA_low | c  }}
                </td>

                <!-- radio select form fields -->
            <!-- Display chosen option as disabled radio buttons -->
                                <td class="formfield">
                                    {% if choice == 'A' %}
                                        <div class="controls">
                                            <input type="radio" style="pointer-events: none;" checked="checked"; disabled>
                                            <input type="radio" style="pointer-events: none; disabled">
                                        </div>
                                    {% elif choice == 'B' %}
                                        <div class="controls">
                                            <input type="radio" style="pointer-events: none; disabled">
                                            <input type="radio" style="pointer-events: none;" checked="checked"; disabled>
                                        </div>
                                    {% endif %}
                                </td>

                <!-- sure payoff -->
                <td class="lottery-b">
                    {{ px }}% chance of {{ payoffB_high | c  }}<br/>
                    {{ py }}% chance of {{ payoffB_low | c  }}
                </td>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

        <div style="text-align: center">
        {% next_button %}
    </div>

{% endblock %}