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

{% block title %}
    Please review your choices:
{% 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;}
    #landscape {display: block;}
    .text-desktop{
        font-size:11pt;
    }
    button.button-desktop{
        width:200px;
    }

    @media screen and (max-width: 567px) {
        #portrait {display: block;}
        #landscape{display:none;}
    }
     @media screen and (min-width: 567px) and (max-width: 1000px) {
        #portrait {display: none;}
        #landscape {display: block;}
        .text-mobile{
            font-size:12px;
        }
        img{
            width:80%;
            height:auto;
        }
        html{
            zoom:0.6;
        }
    }
    @media screen and (min-width: 999px) and (max-width: 1000px) {
        #portrait {display: none;}
        #landscape {display: block;}
        html{
            zoom: 0.7;
        }
        .text-mobile{
            font-size:12px;
        }
        img{
            width:80%;
            height:auto;
        }
        button.button-mobile{
            width: 50vw;
            font-size: 2.2vw;
        }
    }


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

</style>
    <div id="portrait" class="alert alert-danger"> Please tilt your device to properly see all of the instructions. </div>
    <div class="card bg-light instructions">

    <div id="landscape">
<div class="card-body">
Please review your choices above. If this study part is chosen for payment, we will implement the decision that matches the actual decisions of the
CEO and the supervisor in your organization. If you want to make any changes, you can do so. Otherwise, please confirm your choices to proceed.
<br>
<br>
<!-- Case 1 -->
<div id="case1_title" style="display: block">
    <span style="font-size: medium; ">Case 1:</span> <br>
    The CEO <b>decided to leave the supervisor free</b> in her/his decision whether s/he wants to set the minimum transfer of 5 points.
</div>
<div id="case1_input" style="visibility: visible">
        <ul>
            <li>
                Your supervisor <b>decided <u>not</u> to set the minimum transfer</b> of 5 points for you, but to let you decide completely freely about your transfer. <br>
                <table>
                    <tr>
                        <td>How many points do you transfer to the organization (you can enter between 0 and 120 points)?</td>
                        <td width="5%"></td>
                        <td style="position: relative; top:10px">{% formfield player.Decision11 label="" %}</td>
                    </tr>
                </table>
                <br>
            </li>
        </ul>
    </div>
<!-- Case 2 -->
<div id="case2_title" style="display: block">
    <span style="font-size: medium; ">Case 2:</span>
    <br>
    The CEO <b>decided to leave the supervisor free</b> in her/his decision whether s/he wants to set the minimum transfer of 5 points.
</div>
    <div id="case2_input" style="visibility: visible">
        <ul>
            <li>
                Your supervisor <b>decided to set the minimum transfer</b> of 5 points for you.<br>
                <table>
                    <tr>
                        <td>How many points do you transfer to the organization (you can enter between 5 and 120 points)?</td>
                        <td width="5%"></td>
                        <td style="position: relative; top:10px">{% formfield player.Decision12 label="" %}</td>
                    </tr>
                </table>
                <br>
            </li>
        </ul>
    </div>
<!-- Case 3 -->
<div id="case3_title" style="display: block">
    <span style="font-size: medium; ">Case 3:</span>

    <div id="case3_input" style="visibility: visible">

        The CEO <b>forced his supervisor to set the minimum transfer</b> of 5 points.
        <ul>
            <li>
                Your supervisor had <b> no choice</b> but had to set the minimum transfer of 5 points for you.
                <table>
                    <tr>
                        <td>How many points do you transfer to the organization (you can enter between 5 and 120 points)?</td>
                        <td width="5%"></td>
                        <td style="position: relative; top:10px">{% formfield player.Decision13 label="" %}</td>
                    </tr>
                </table>
                <br>
            </li>
        </ul>
    </div>
        </div>
    </div>
        </div>
    </div>
        <br>
    <div align="right"><input type="submit" id="confirm" class="btn btn-primary" style="visibility: visible" value="Confirm"/> </div>
<script>
function show_next(case_nr) {
       // show submit button & review instructions
    document.getElementById("confirm").style.visibility = "visible";
    document.getElementById("review").style.visibility = "visible";
  }

</script>
{% endblock %}