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

{% block title %}
    Your decisions
{% endblock %}

{% block content %}
    <div class="card bg-light instructions">
<div class="card-body">
<div id="case1_title" style="display: block">
    <span style="font-size: large; ">Case 2:</span>  <br>
    <span style="font-size: medium; "> <u> Stage 1:</u></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_title" style="display: none">
    <span style="font-size: medium; "> <u> Stage 2:</u></span> <br>
    Your supervisor <b> decided  to set the minimum transfer </b> of 5 points for you.
</div>

<div id="case3_title" style="display: none">
    <span style="font-size: medium; "> <u> Stage 3:</u></span> <br>
    <td>How many points do you transfer to the organization (you can enter between 5 and 120 points)?</td>
</div>
<!-- Case 3 -->
<div id="case3_input" style="visibility: hidden">

        <td style="text-align: right; top:5px">{% formfield player.Decision12 label="" %}</td>
    </div>
<!-- Case 1 -->
<div id="case1_input" style="visibility: visible">
        <div style="text-align: right;">
        <input type="button" id="show_next_1" onclick="show_next(2)" class="btn btn-primary" value="Continue"/>
        </div>
</div>
<!-- Case 2 -->
<div id="case2_input" style="visibility: hidden">
        <div style="text-align: right;">
        <input type="button" id="show_next_2" onclick="show_next(3)" class="btn btn-primary" value="Continue"/>
        </div>
</div>
</div>
    </div>
    <br>
    <div style="text-align: right;">
    <input type="submit" id="confirm" class="btn btn-primary" style="visibility: hidden" value="Confirm"/>
    </div>
<script>

function show_next(case_nr) {
    if (case_nr == 1) {
        document.getElementById("case1_title").style.display = "block";
        document.getElementById("case1_input").style.visibility = "visible";
        document.getElementById("case2_title").style.display = "none";
        document.getElementById("show_next_2").style.visibility = "hidden";
    } else if (case_nr == 2) {
        document.getElementById("case1_title").style.display = "block";
        document.getElementById("case1_input").style.visibility = "hidden";
        document.getElementById("case2_title").style.display = "block";
        document.getElementById("case2_input").style.visibility = "visible";
    } else if (case_nr == 3) {
        document.getElementById("case2_input").style.visibility = "hidden";
        document.getElementById("case3_title").style.display = "block";
        document.getElementById("case3_input").style.visibility = "visible";
        document.getElementById("confirm").style.visibility = "visible";
    }
}

</script>
{% endblock %}