{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block title %}
    <div id="title" >
     The Options
    </div>
{% endblock %}

{% block content %}

<style>
    td.A {
        visibility:hidden;
        width:50%;
        padding-right:60px;
    }
    td.B {
        visibility:hidden;
        width:50%;
        padding-right:60px;
        vertical-align:top;
    }
    #portrait {display: none;}
    #landscape1 {display: block;}
    #landscape2 {display: block;}

    #lowStack-mobile {display:none;}
    #highStack-mobile {display:none;}

    #lowStackB-mobile {display:none;}
    #highStackB-mobile {display:none;}

    .text-desktop{
        font-size:11pt;
    }

    @media screen and (max-width: 567px) {
        #portrait {display: block;}
        #landscape1{display:none;}
        #landscape2{display:none;}
        #lowStack {display:none;}
        #highStack {display:none;}
        #lowStack-mobile {display:none;}
        #highStack-mobile {display:none;}
    }
    @media screen and (min-width: 567px) and (max-width: 800px) {
        #portrait {display: none;}
        #landscape1 {display: block;}
        #landscape2 {display: block;}

        #lowStack-mobile {display:block;}
        #highStack-mobile {display:block;}
        #lowStackB-mobile {display:block;}
        #highStackB-mobile {display:block;}



        html{
            zoom:0.73;
        }






        .text-mobile{
            font-size:12px;
        }
        img{
            width:50%;
            heigth:auto;
        }
    }



    .button {
        position: fixed;
        top: 50%;
        right: 00%;
        bottom: 47%;
        left: 700px;
        content: ' ';
  }
  .instructions-button {
    padding-top: 20px;
  }

  .rangeslider {
    font-size:10pt;
    padding-bottom: 5em;
}
input[type="range"]{
  width:100%;
}
table.rangeslider td{
    border-bottom: 1px solid #ddd;
}

</style>
<div id="portrait" class="alert alert-danger">
    Please tilt your device to see the instructions.
</div>

<!-- END OF ANNOUNCE SCREEN CODE -->

<!-- CHOICE SCREEN:
    The subject is confronted with her or his personal lotteries.
    Default setting: don't display. The choice screen will only displayed after the confirmation of the announce screen-->

<div class="card bg-light instructions">
<div class="card-body">

    <ul>
    <li> Below, you see <b>Option A</b> and <b>Option B</b> for part 2 of the study.<br><br>
    <li> <b>Option A</b> and <b>Option B</b> remain <b>the same</b> throughout part 2 of the study.<br><br>
	<li>You will make 10 choices. The choice is whether you want to choose between these options <b>yourself</b> or whether <b>you let the type 3 participant make this choice for you.</b><br><br>
    </ul>
<br><br>
<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>

                        </td>
                    </tr>


                </table>
  <br><br><br><br><br>
<div align="right"><input type="submit" onclick="return submitForm();" class="btn btn-primary btn-large" value="Continue"></inputbutton></div>




<br><br>

</div>
</div>
        </body>
<!-- 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>

<input type="hidden" id="tab_desc_options_part2" name="tab_desc_options_part2" value="0">
<input type="hidden" id="focus_desc_options_part2" name="focus_desc_options_part2" value="0">
<input type="hidden" id="totaltime_desc_options_part2" name="totaltime_desc_options_part2" value="0">


<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() {
        if($tabswitches == 0){
            $time_total = (Date.now() - $start)/1000;
            $time_focus = $time_total;
        }


        document.getElementById("tab_desc_options_part2").setAttribute('value', $tabswitches);
        document.getElementById("focus_desc_options_part2").setAttribute('value', $time_focus);
        document.getElementById("totaltime_desc_options_part2").setAttribute('value', $time_total);

    return true;
}
</script>


{% endblock %}