{{ load static }}
{{ block content }}
<!--External CSS & js-->
<link rel="stylesheet" href="{{ static 'style_sheets/general.css' }}" type="text/css">
<link rel="stylesheet" href="{{ static 'style_sheets/tables.css' }}" type="text/css">
<script src="{{ static 'java_scripts/general.js' }}"></script>

<!-- Title -->
{{ block title }}
<div class="Title_decision">
    <h3 style="float: left"><u>Slider Training:</u> Feedback</h3>
    <h3 style="float: right">Round {{ player.round_number }}</h3>
</div>
{{ endblock }}

<!-- Invest Value and your selection info. -->
<div class="draws">
    <h3 style="float: left"><u>Invest Value:</u> {{ invest_value }}</h3>
    <h3 style="float: right"><u>Your Minimum Endowment:</u> {{ player.pb_outside_option }}</h3>
</div>

<!-- Table of draws -->
<table class="draws_table">
    <tr>
        <th>Draw:</th>
        <th>Endowment:</th>
        <th>Your Payoff:</th>
        <th>Our Advice Payoff:</th>
        <th>Payoff Difference:</th>
    </tr>
    {{ for key, values in draw_dict.items() }}
    <tr>
        <td>{{ values.1 }}</td>
        <td>{{ values.2 }}</td>
        <td>{{ values.3 }}</td>
        <td>{{ values.4 }}</td>
        <td {{ if values.6 == 0 }} style="background-color: red" {{ endif }}>{{ values.5 }}</td>
    </tr>
    {{ endfor }}
    <tr style="border-top: 2px solid black"></tr>
</table>

<!-- Highlighting Key -->
<div class="draws_key">
    <table>
        <th>You earned <i>more</i> than Our Advice:</th>
        <th style="width: 20px"></th>
        <td style="border: 1px solid black; background-color: greenyellow"></td>
    </table>
    <table>
        <th>You earned <i>less</i> than Our Advice:</th>
        <th style="width: 20px"></th>
        <td style="border: 1px solid black; background-color: red"></td>
    </table>
</div>

<!--Next Button-->
<div class="button">
    <button>Continue</button>
</div>

{{ endblock }}