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

{% block styles %}
<style>
table, th {
  border: 1px solid grey;
    text-align: center;
}
.td1 {
  border: 1px solid grey;
    text-align: center;
}
            #selected_2 {
background-color: #efe341;
            }
table{
    width: 60%;
    alignment: center;
}

td{
width: 15em;
height: 4em;

}



</style>

{% endblock %}




{% block title %}
    <div align="center">
{% if player.round_number == C.NUM_ROUNDS %} Payoff Relevant Choice {% else %}  Outcome {% endif %}
    </div>
{% endblock %}

{% block content %}


<div align="center">

{% if player.round_number == C.NUM_ROUNDS %}
    <p>
        The computer has selected the task below to determine your bonus payment.
    </p>
    <p>
        Your bonus payment amounts to: {{ payoff }}.
    </p>
    <div style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">
{% endif %}



<div style="position: relative; width: 100%;">
    <p>
            Your {{color_wheel}} wheel of fortune stopped at field {{ realized_field }}.
        <b> <span style="color: {{color_1}};">Option {{option_1}} pays {{ payoff_A }}</span></b>.
        <b> <span style="color: {{color_2}};">Option {{option_2}} pays {{ payoff_B }}</span></b>.


    <p>
   You chose {{ chosen_option }}.
    </p>









<table style="margin-top: 15px;">
    <!-- Header Row -->
        <col style="width: 19%;">
    <col style="width: 27%;">
    <col style="width: 27%;">
    <tr>
        <td class="td1"></td>
        <td class="td1"><b> <span style="color: {{color_1}};">Option {{option_1}}</span> </b></td>
        <td class="td1"><b> <span style="color: {{color_2}};">Option {{option_2}}</span> </b></td>
    </tr>

    <!-- Transposed Fields -->
    {% for ff, ft, p, o1, o2, w in rows %}
   <tr>
       <td class="td1" {% if realized_field >= ff and realized_field <= ft %}
                    id="selected_2"
                    {% endif %}>         <img src="{% static w %}" width="58px"> </td>
       <td class="td1"{% if realized_field >= ff and realized_field <= ft %}
                    id="selected_2"
                    {% endif %}> <b> <span style="color: {{color_1}};"> {{ o1 }} </span> </b> </td>
       <td class="td1"{% if realized_field >= ff and realized_field <= ft %}
                    id="selected_2"
                    {% endif %}> <b> <span style="color: {{color_2}};"> {{ o2 }} </span> </b> </td>

   </tr>
    {% endfor %}
</table>





    <div style="text-align: center; margin-top: 50px;">

      {% if player.round_number == C.NUM_ROUNDS %}
        </div>

{% endif %}
    </div>
        </div>
     {% next_button %}









     </div>

{% endblock %}