{{ extends 'global/Page.html' }}
   {{ block title }}
   <h2 style="text-align: center;">
   Round {{player.round_number}} out of 18
    </h2>
   {{ endblock }}
{{ block content }}

<br>
<br>
        <table class="mx-auto">
        <tr>
            <td class="hide_top & hide_left", colspan="5"> </td>
            <td> First Mover  payment </td>
            <td> Your payment </td>
        </tr>
        <tr>
            <td class="hide_top & hide_left & hide_bottom", rowspan="4"> First Mover <br> choice </td>
            <td rowspan="2", style="background-color:LightGoldenrodYellow;"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"> Your choice <br> (Second Mover) </td>
            <td> <input type="radio" name="choice_2nd_Top" value="{{ True }}" class="btn btn-primary btn-large"> </td>
            <td class="hide_left"> A </td>
            <td> {{R1}} tokens </td>
            <td> {{R2}} tokens </td>
        </tr>
        <tr>
            <td><input type="radio" name="choice_2nd_Top" value="{{ False }}" class="btn btn-primary btn-large"> </td>
            <td class="hide_left"> B </td>
            <td> {{S1}} tokens </td>
            <td> {{T2}} tokens </td>
        </tr>
        <tr>
            <td rowspan="2", style="background-color:LightGray;"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"> Your choice <br> (Second Mover) </td>
            <td> <input type="radio" name="choice_2nd_Down" value="{{ True }}" class="btn btn-primary btn-large"> </td>
            <td class="hide_left"> A </td>
            <td> {{T1}} tokens </td>
            <td> {{S2}} tokens </td>
        </tr>
        <tr>
            <td><input type="radio" name="choice_2nd_Down" value="{{ False }}" class="btn btn-primary btn-large"> </td>
            <td class="hide_left"> B </td>
            <td> {{D1}} tokens </td>
            <td> {{D2}} tokens </td>
        </tr>
    </table>

<br>
<div style="flush:right; text-align: right;">
    {% next_button %}
</div>
{{ endblock }}

{{ block app_styles }}
    <style type="text/css">
        table {
            border: 1px solid black;
        }
        td {
           border: 1px solid black;
           background-color: bg-light mb-3;
           color: black;
           font-weight: solid;
           font-size: 19px;
           padding: 10px 10px 10px 10px;
           text-align: center;
        }
        tr.hide_all > td, td.hide_all{
           border-style:hidden;
        }
        tr.hide_right > td, td.hide_right{
           border-right-style:hidden;
        }
        tr.hide_left > td, td.hide_left{
           border-left-style:hidden;
        }
        tr.hide_top > td, td.hide_top{
           border-top-style:hidden;
        }
        tr.hide_bottom > td, td.hide_bottom{
           border-bottom-style:hidden;
        }
        tr.width_bottom > td, td.width_bottom{
           border-bottom-width:4px;
        }
    </style>
{{ endblock }}