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

{% block styles %}
<style>
            #selected_2 {
background-color: #efe341;
            }

table, th, td {
  border: 1px solid grey;
    text-align: center;
}
table{
    width: 60%;
    alignment: center;
}

td{
width: 15em;
height: 4em;
}
</style>

{% endblock %}


{% block title %}
    <div align="center">
    结果反馈
    </div>
{% endblock %}

{% block content %}
    <div align="center">
    <p>
        幸运转盘停留在了区域{{ realized_field }}.<br>
        因此，选项A产生了{{ payoff_A }}个银币的报酬，而选项B产生了{{ payoff_B }}个银币的报酬。
    <br>
    您选择了选项{{ chosen_option }}. <br>
    </p>

        <table>
        <tr>
        <td>

        </td>
            {% for ff, ft, p in fields %}
                <td align="center" {% if realized_field >= ff and realized_field <= ft %}
                    id="selected_2"
                    {% endif %}>
               区域 <br>
                {{ ff }}-{{ ft }}

                    <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td>

        <input type="radio" id="A" name="skewed" disabled {{ checked_A }}>
        <label for="A">选项 A </label><br>

        </td>
            {% for o, ff, ft in oo_1 %}
                <td {% if realized_field >= ff and realized_field <= ft %}
                    id="selected_2"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
        <tr>
        <td>

        <input type="radio" id="B" name="skewed" disabled {{ checked_B }}>
        <label for="B">选项 B </label><br>

        </td >
            {% for o, ff, ft in oo_2 %}
                <td {% if realized_field >= ff and realized_field <= ft %}
                    id="selected_2"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>


    </table>
<br>

    <button class="nexttab btn-primary btn next">下一步</button>

    </div>
{% endblock %}