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

<br>
<br>
        <table class="mx-auto">
        <tr>
            <td class="hide_top & hide_left", colspan="5"> </td>
            <td> Your  payment </td>
            <td> Second Mover payment </td>
        </tr>
        <tr>
            <td class="hide_top & hide_left & hide_bottom", rowspan="4"> Your choice <br> (First Mover)  </td>
            <td class="hide_right & width_bottom", rowspan="2"><input type="radio" name="choice_1st" value="{{ True }}" class="btn btn-primary btn-large" required></td>
            <td rowspan="2", class="width_bottom">A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"， class="width_bottom"> Second Mover <br> choice </td>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td id="cell1" > </td>
            <td id="cell2" > </td>
        </tr>
        <tr>
            <td class="width_bottom">  &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td id="cell3" class="width_bottom"> </td>
            <td id="cell4" class="width_bottom"> </td>
        </tr>
        <tr>
            <td class="hide_right", rowspan="2"><input type="radio" name="choice_1st" value="{{ False }}" class="btn btn-primary btn-large" required></td>
            <td rowspan="2", > B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"> Second Mover <br> choice </td>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td id="cell5" > </td>
            <td id="cell6" > </td>
        </tr>
        <tr>
            <td>  &nbsp;&nbsp;&nbsp;&nbsp; B &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td id="cell7" > </td>
            <td id="cell8" > </td>
        </tr>
    </table>
<span class="error-message" style="display: none;">Please make your decision.</span>
<br>


   <script>
        var random1 = Math.random();
        var random2 = Math.random();
        var random3 = Math.random();
        var random4 = Math.random();
        var random5 = Math.random();
        if (random1 < 0.5) {
            if (random2 < 0.5) {
                document.getElementById("cell1").innerHTML = "{{ R1 }} tokens";
                document.getElementById("cell2").innerHTML = "{{ R2 }} tokens";
                document.getElementById("cell3").innerHTML = "{{ S1 }} tokens";
                document.getElementById("cell4").innerHTML = "{{ T2 }} tokens";
            } else {
                document.getElementById("cell3").innerHTML = "{{ R1 }} tokens";
                document.getElementById("cell4").innerHTML = "{{ R2 }} tokens";
                document.getElementById("cell1").innerHTML = "{{ S1 }} tokens";
                document.getElementById("cell2").innerHTML = "{{ T2 }} tokens";
            }
            if (random3 < 0.5) {
                document.getElementById("cell5").innerHTML = "{{ T1 }} tokens";
                document.getElementById("cell6").innerHTML = "{{ S2 }} tokens";
                document.getElementById("cell7").innerHTML = "{{ D1 }} tokens";
                document.getElementById("cell8").innerHTML = "{{ D2 }} tokens";
            } else {
                document.getElementById("cell7").innerHTML = "{{ T1 }} tokens";
                document.getElementById("cell8").innerHTML = "{{ S2 }} tokens";
                document.getElementById("cell5").innerHTML = "{{ D1 }} tokens";
                document.getElementById("cell6").innerHTML = "{{ D2 }} tokens";
            }
            document.getElementsByName("choice_1st")[0].value = "{{ True }}";
            document.getElementsByName("choice_1st")[1].value = "{{ False }}";
        } else {
            if (random4 < 0.5) {
                document.getElementById("cell1").innerHTML = "{{ T1 }} tokens";
                document.getElementById("cell2").innerHTML = "{{ S2 }} tokens";
                document.getElementById("cell3").innerHTML = "{{ D1 }} tokens";
                document.getElementById("cell4").innerHTML = "{{ D2 }} tokens";
            } else {
                document.getElementById("cell3").innerHTML = "{{ T1 }} tokens";
                document.getElementById("cell4").innerHTML = "{{ S2 }} tokens";
                document.getElementById("cell1").innerHTML = "{{ D1 }} tokens";
                document.getElementById("cell2").innerHTML = "{{ D2 }} tokens";
            }
            if (random5 < 0.5) {
                document.getElementById("cell5").innerHTML = "{{ R1 }} tokens";
                document.getElementById("cell6").innerHTML = "{{ R2 }} tokens";
                document.getElementById("cell7").innerHTML = "{{ S1 }} tokens";
                document.getElementById("cell8").innerHTML = "{{ T2 }} tokens";
            } else {
                document.getElementById("cell7").innerHTML = "{{ R1 }} tokens";
                document.getElementById("cell8").innerHTML = "{{ R2 }} tokens";
                document.getElementById("cell5").innerHTML = "{{ S1 }} tokens";
                document.getElementById("cell6").innerHTML = "{{ T2 }} tokens";
            }
            document.getElementsByName("choice_1st")[0].value = "{{ False }}";
            document.getElementsByName("choice_1st")[1].value = "{{ True }}";
        }
    </script>



<input type="hidden" name="timeSpent" id="timeSpent"/>
<script>
var pageTimeElapsed = 0;
var pageTimerID = -1;

function pageTick() {
  pageTimeElapsed++
  document.getElementById("timeSpent").value = pageTimeElapsed;
}
window.onload = function() {
  if(pageTimerID == -1){
    pageTimerID = setInterval(pageTick, 100);
  }
};
</script>


<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:3px;
        }
    </style>
{{ endblock }}