{% extends "floodgame/Page.html" %}
{% load staticfiles otree_tags %}


{% block title %}
{{page_title}}
{% endblock %}

{% block content %}

{% include 'snippets/Progressbar.html' %}


<h5>
    The decisions you made between option C and option D are listed below. <br> The computer has randomly selected the
    <b>{% if left_selected %} left {% else %} right {%endif%} column </b> and <b>row {{selected_row}}</b> for payment.


    <br><br></h5>

<div align="middle">
    <table  style="width:85%" class="table table-sm table-striped">
        <colgroup>
            <col width="12%">
            <col width="3%">
            <col width="15%">
            <col width="6%">
            <col width="4%">
            <col width="4%">
            <col width="12%">
            <col width="3%">
            <col width="15%">
            <col width="4%">

        </colgroup>
        <tr >
            <th style="text-align:center; border-right:1px solid #000;border-bottom:1px solid #000" colspan="5"><h5>Option C</h5></th>
            <th style="text-align:center; border-bottom:1px solid #000" colspan="5"><h5>Option D</h5></th>
        </tr>
        {% for amount in vars_for_risk %}

                {% if selected_row == forloop.counter %}
        <tr class="bg-success" align="left">
                {% else %}
        <tr>
                {% endif %}

            {% if forloop.counter >= player.switching_point_risk %}
                    <td align="left"><span style="color:lightgray;">50% chance of </span>
                    <td align="left"><span style="color:lightgray;"><b>&euro;{{ amount.0 }} </b>  </span></td>
                    <td align="left"><span style="color:lightgray;"> and 50% chance of</span>
                    <td align="left"><span style="color:lightgray;"> &euro;{{amount.1}} </span></td>
            {% else %}
                    <td align="left">50% chance of


                {% if forloop.counter == selected_row and left_selected and forloop.counter < player.switching_point_risk%}
                        <td align="left" style="border:1px solid #000;"><b> &euro;{{ amount.0 }} </b></td>
                {% elif forloop.counter < player.switching_point_risk%}
                        <td align="left"><b> &euro;{{ amount.0 }} </b></td>
                {% else %}
                        <td align="left"><span style="color:lightgray;"><b> &euro;{{ amount.0 }}  </b></span></td>
                {% endif%}


                <td align="left"> and 50% chance of

                {% if forloop.counter == selected_row and not left_selected and forloop.counter < player.switching_point_risk%}
                        <td align="left" style="border:1px solid #000;"><b> &euro;{{ amount.1 }} </b></td>
                {% elif forloop.counter < player.switching_point_risk%}
                        <td align="left"><b> &euro;{{ amount.1 }} </b></td>
                {% else %}
                     <td align="left"><span style="color:lightgray;"><b> &euro;{{ amount.1 }}  </b></span></td>
                {% endif%}
            {% endif%}

            <td align="left" style="border-right:1px solid #000;">
            <td align="left"></td>
            <td align="left">
            {% if forloop.counter >= player.switching_point_risk %}
                    50% chance of
            {% else %}
                    <span style="color:lightgray;"> 50% chance of </span>
            {% endif%}
            </td>

            {% if forloop.counter == selected_row and left_selected and forloop.counter >= player.switching_point_risk%}
                    <td align="left" style="border:1px solid #000;"><b> &euro;{{ amount.2 }} </b></td>
            {% elif forloop.counter >= player.switching_point_risk%}
                    <td align="left"><b> &euro;{{ amount.2 }} </b></td>
            {% else %}
                    <td align="left"><span style="color:lightgray;"><b> &euro;{{ amount.2 }}  </b></span></td>
            {% endif%}


            <td align="left">
            {% if forloop.counter >= player.switching_point_risk %}
                    and 50% chance of
            {% else %}
                    <span style="color:lightgray;"> and 50% chance of </span>
            {% endif%}
            </td>


            {% if forloop.counter == selected_row and not left_selected and forloop.counter >= player.switching_point_risk %}
                    <td align="left" style="border:1px solid #000;"><b> &euro;{{ amount.3 }}</b></td>
            {% elif forloop.counter >= player.switching_point_risk%}
                    <td align="left"><b> &euro;{{ amount.3 }} </b></td>
            {% else %}
                    <td align="left"><span style="color:lightgray;"><b> &euro;{{ amount.3 }}  </b></span></td>
            {% endif%}

        </tr>

        {% endfor %}

    </table>
</div>
<div class="card"><h5>

    Your payoff for the additional task thus: <b>&euro;{{payoff_risk}}</b>
</h5></div>


    {{ form.errors }}
    <input type="hidden" name="switching_point_risk" id="id_switching_point"
           value="9999">

<button name="next_button"  class="btn btn-primary btn-right btn-lg" > Next </button>


{% include 'snippets/InstructionsCounter.html' %}

{% endblock %}