{{ extends 'global/Page.html' }}
   {{ block title }}
 <div style="text-align: center;">
     <h1>Make your guess</h1>
 </div>
    {{ endblock }}


{{ block content }}
        <style>
            .ribbon {
               position: relative;
               top: -16px;
               right: -706px;
            }
        </style>

<div style="text-align: justify;" class="card bg-light mb-3">
    <div class="card-body">
<br>
<br>

        <p> In this page, you need to <b>guess Second Mover's choice after knowing First Mover's decision</b>: &nbsp &nbsp  <span style="background-color:LightGoldenrodYellow; font-size: 20px;">A</span>  or  <span style="background-color:LightGray; font-size: 20px;">B</span> </p>
<br>
<br>
<br>
<br>
        <table class="mx-auto">
        <tr>
            <td class="hide_top & hide_left", colspan="5"> </td>
            <td> First Mover  payment </td>
            <td> Second Mover 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;"， class="width_bottom"> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; A &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </td>
            <td rowspan="2"， class="width_bottom"> Second Mover <br> choice </td>
            <td><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td class="hide_left"> A </td>
            <td> {{R1}} tokens </td>
            <td> {{R2}} tokens </td>
        </tr>
        <tr>
            <td class="width_bottom"><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td class="hide_left & width_bottom"> B </td>
            <td class="width_bottom"> {{S1}} tokens </td>
            <td class="width_bottom"> {{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"> Second Mover <br> choice </td>
            <td><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td class="hide_left"> A </td>
            <td> {{T1}} tokens </td>
            <td> {{S2}} tokens </td>
        </tr>
        <tr>
            <td><input type="radio" name="myButton" value="theValue" disabled onclick="alert('Sorry, this option is not available!')"></td>
            <td class="hide_left"> B </td>
            <td> {{D1}} tokens </td>
            <td> {{D2}} tokens </td>
        </tr>
    </table>
    <br>

<p> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 1. Assume Second Mover knows First Mover chose A, what do you think is the percent chance that Second Mover would choose A? </p>
<div style="display: flex">
        {{ for choice in form.cc }}
        <div style="flex: 1; text-align: center">
            {{ choice }}
            <br>
            <span style="text-align: center">{{ choice.label }}</span>
        </div>
        {{ endfor }}
</div>

    <br>

<p> &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 2. Assume Second Mover knows First Mover chose B, what do you think is the percent chance that Second Mover would choose A? </p>
<div style="display: flex">
        {{ for choice in form.dc }}
        <div style="flex: 1; text-align: center">
            {{ choice }}
            <br>
            <span style="text-align: center">{{ choice.label }}</span>
        </div>
        {{ endfor }}
</div>

<br>

{# todo: radio buttons laid out individually, no loop (by index) #}
        <br>
    </div>
</div>



<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:center; text-align: center;">
    {{ next_button }}
</div>
{{ endblock }}

{{ block app_styles }}
    <style>
        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 }}