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

{% block title %}
    Round Chosen by the computer
{% endblock %}

{% block content %}
<style>
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #3395ff;;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
</style>
<div class="card bg-light instructions">
<div class="card-body">
<p>
    <b>
       <p> Choice situation {{ player.payoffrelevant_round_part2 }}</b> has been selected by the computer.

    <p>In this situation, you decided that <b>the participant type 3 chooses an option in your behalf.</b>

    <p> The choice will now be prompted to the other participant and you will be informed about the outcome after answering the survey.






    <div id="waiting">
    <div class="loader"></div><div><center>Waiting for the other participant</center></div>
    </div>
<div id="finish-text">
    You have now completed part 2. <!--Please press <i>Continue</i> to be directed to part 3. You will see a summary of your total earnings as soon as you have completed part 3.-->
    Please click <i>Continue</i> to be directed to the payoff screen, where you will see a summary of the earnings.
</div>
</p>
</div>
</div>

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

<!-- 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_delegation_part2" name="tab_delegation_part2" value="0">
<input type="hidden" id="focus_delegation_part2" name="focus_delegation_part2" value="0">
<input type="hidden" id="totaltime_delegation_part2" name="totaltime_delegation_part2" value="0">
<script>
    function submitForm() {
        if($tabswitches == 0){
            $time_total = (Date.now() - $start)/1000;
            $time_focus = $time_total;
        }

        document.getElementById("tab_delegation_part2").setAttribute('value', $tabswitches);
        document.getElementById("focus_delegation_part2").setAttribute('value', $time_focus);
        document.getElementById("totaltime_delegation_part2").setAttribute('value', $time_total);

        return true;
    }
</script>

<script>
    window.setTimeout(waitingOver, 15000);
    document.getElementById("waiting").style="display:none";
    if(localStorage.getItem("waitingOver")!=1){
        document.getElementById("finish-text").style="display:none";
        document.getElementById("finish-button").style="display:none";
        document.getElementById("waiting").style="display:block";
    }


    function waitingOver(){
        localStorage.setItem("waitingOver", 1);
        document.getElementById("finish-text").style="display:block";
        document.getElementById("finish-button").style="display:block";
        document.getElementById("waiting").style="display:None";
    }
</script>

<!--
<div class="card bg-success">
<p style="color:white">
    For experimenter's eyes only
    Your WTP: {{ player.WTP }} <br>
    Your choice consistency: {{ player.choice_consistency }} <br>
    Your payoff-relevant round: {{ player.payoffrelevant_round_part2 }} <br>
</p>
    </div>-->
{% endblock %}