{% extends "global/Page.html" %}
{% load otree %}


{% block title %}
    Option Choice
{% endblock %}

{% block content %}
<style>
    #portrait {display: none;}
    #landscape {display: block;}
    .text-desktop{
        font-size:11pt;
    }

    @media screen and (max-width: 567px) {
        #portrait {display: block;}
        #landscape{display:none;}

    }
    @media screen and (min-width: 567px) and (max-width: 800px) {
        #portrait {display: none;}
        #landscape {display: block;}
        html{
            zoom:0.6;
        }
        .text-mobile{
            font-size:12px;
        }
        img{
            width:80%;
            heigth:auto;
        }
    }

</style>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Information for portrait viewers. They need to tilt to landscape-view in order to see the instructions -->
<div id="portrait" class="alert alert-danger">
    Please tilt your device to see the page.
</div>
<!---------->
<div id="landscape">





<div class="card bg-light instructions" style="width:100%" >
<div class="card-body" >
    <p>
    The computer chose <b>choice situation {{ player.payoffrelevant_round_part2 }}</b>.<br><br>  In this situation, you decided to choose an option <b>yourself</b> and to
    {% if price > 0 %}
        <b style="color:saddlebrown">pay a price of {{ player.current_price | to0 }} {{ Constants.currency }}</b>.<br><br>
    {% else %}
        <b style="color:green">receive a bonus of {{ bonus | to0 }} {{ Constants.currency }}</b>.<br><br>
    {% endif %}

    Please choose one of the options:<br><br>
    </p>
<table style="width:100%;" id="choicescreen"  cellpadding="10">
    <tr><td colspan="3"><center><b>Option A</b></center></td>
        <td colspan="3"><center><b>Option B</b></center></td></tr>
                    <tr>
                        <td style="border: 0px solid black">
                            <center><canvas style="position: relative; right: -120px" id='highStack_A' width='110px' height='100px'></canvas></center></td>

                        <td style="border: 0px solid black; position: relative; right: -90px; top: 0px"><canvas id='lowStack_A' width='110px' height='100px'></canvas></td>

                        <td style="border: 0px solid black; position: relative; right: -230px;"><canvas id='highStack_B' width='110px' height='100px' ></canvas></td>
                        <td style="border: 0px solid black; position: relative; right: -210px;"><canvas id='lowStack_B' width='110px' height='100px' ></canvas></td>
                    </tr>
                    <tr>
                        <td colspan="3">

                            <table>

                                <center><b>  <b><font color="#b7458d"> Participant 3</font></b>  gets {{ player.optionA_high | to0 }} {{ Constants.currency }} </b> </center><br>
                                    </td>

                                       <center> <b> <b><font color="#4d8ecd"> Participant 4</font></b>  gets {{ player.optionA_low | to0}} {{ Constants.currency }} </b></center>
                                    </td>
                                   <!-- <td>
                                        &nbsp&nbsp<canvas id='lowStack_A' width='110px' height='100px' ></canvas><br>
                                    </td>-->
                                </tr>
                            </table>
                        </td>

                        <td colspan="3">
                              <table>

                                <center><b> <b><font color="#b7458d"> Participant 3</font></b>  gets {{ player.optionB_high | to0 }} {{ Constants.currency }} </b> </center><br>
                                    </td>
                                   <center> <b> <b><font color="#4d8ecd"> Participant 4</font></b>  gets {{ player.optionB_low | to0 }} {{ Constants.currency }} </b></center>
                                    </td>
                                   <!-- <td>
                                      &nbsp&nbsp<canvas id='highStack_A' width='110px' height='100px'></canvas>
                                    </td>-->

                                    </td>
                                   <!-- <td>
                                        &nbsp&nbsp<canvas id='lowStack_A' width='110px' height='100px' ></canvas><br>
                                    </td>-->
                                </tr>



                            </table>
                            <tr>
                    <th colspan="3"><center>
                        <input type="submit" id="0" onclick="return submitForm(this.id);" class="btn btn-primary btn-large" value="Option A" style="height:50px;width:200px"></inputbutton>
                    </center></th>
                      <th colspan="3"><center>
                      <input type="submit" id="1" onclick="return submitForm(this.id);" class="btn btn-primary btn-large" value="Option B" style="height:50px;width:200px"></inputbutton></center></th>
                  </tr>

                        </td>
                    </tr>


                </table>
  <br><br><br><br><br>
    <input type="hidden" id="optionchoice_auto" name="optionchoice_auto">
</div>
</div>

</div>
<!-- END OF CHOICE SCREEN CODE -->
<script type="text/javascript" src="{% static 'Power/CoinStack.js'%}"></script>
<script type="text/javascript" src="{% static 'Power/coin_stack.js'%}"></script>


<!-- tabswitches & focustime -->
<script src="{% static "Power/jquery-3.3.1.js" %}"></script>
<script src="{% static "Power/detect_tabswitch.js" %}"></script>




<script type="text/javascript">
drawStack('highStack_A', {{ player.optionA_high| to0 }}, "#b7458d", 12, 10, 17, 11, -10, 74.5);
drawStack('lowStack_A', {{ player.optionA_low | to0}},"#4d8ecd", 12, 10, 17, 11, -10, 74.5);

drawStack('highStack_B', {{ player.optionB_high | to0 }}, "#b7458d", 12, 10, 17, 11, -10, 74.5);
drawStack('lowStack_B', {{ player.optionB_low | to0 }}, "#4d8ecd", 12, 10, 17, 11, -10, 74.5);

// handle position of highStack_B
if({{ player.optionB_high }} > 250){
    document.getElementById("highB").style.right = "-50px";
} else if({{ player.optionB_high }} < 200){
    document.getElementById("highB").style.right = "-80px";
}
// focustime
function submitForm(id) {
    if($tabswitches == 0){
        $time_total = (Date.now() - $start)/1000;
        $time_focus = $time_total;
    }
    document.getElementById("optionchoice_auto").setAttribute('value', parseInt(id));



    return true;
}
</script>

{% endblock %}