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

{% block title %}
{% endblock %}

{% block styles %}
<style>
.content {
    height: 100vh;
    justify-content: center;
    align-items: center;
    /* font-size: 70px; */
}

.decision {
    justify-content: center;
    align-items: center;
}

.page-header {
    margin: 0px;
}

.otree-body.container {
    margin: 0px auto 0px;
    font-size: 1.5rem;
    font-weight: normal;
}

.otree-timer {
    display: none;
}
</style>
{% endblock %}

{% block content %}
<div class="row content">
    <div class="col-12">
    {% if player.number_on_left %}
        <div class="row decision">
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option A</b></div>
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option B</b></div>
        </div>
        <div class="row decision">
          <div class="col-4" style="text-align:center;">
                <div><b>{{ player.number }}</b></div>
          </div>
        <div class="col-4" style="text-align:center;">
            <div><b>{{Constants.downside}}</b> if opponent chooses A</div>
            <div><b>{{Constants.upside}}</b> if opponent chooses B</div>
        </div>
        </div>
    {% else %}
        <div class="row decision">
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option B</b></div>
          <div class="col-4" style="text-align:center; margin-bottom: 0.7rem;"><b>Option A</b></div>
        </div>
        <div class="row decision">
          <div class="col-4" style="text-align:center;">
            <div><b>{{Constants.downside}}</b> if opponent chooses A</div>
            <div><b>{{Constants.upside}}</b> if opponent chooses B</div>
          </div>
        <div class="col-4" style="text-align:center;">
            <div><b>{{ player.number }}</b></div>
        </div>
        </div>
    {% endif %}

<br>
<br>
</div>
</div>
    <div class="btn-div">
        <button id="left" name="decision" value="Left" class="btn btn-outline-primary btn-large" style="display:none;">Left</button>
        <button id="right" name="decision" value="Right" class="btn btn-outline-primary btn-large" style="display:none;">Right</button>
    </div>


<input type="hidden" name=dectime id="id_stop"/>

{% endblock %}


{% block scripts %}
<script>
    var left = document.getElementById("left");
    var right = document.getElementById("right");

    function leftClicked() {
        left.click();
    }

    function rightClicked() {
        right.click();
    }

    document.onkeydown = function (e) {
        var keyCode = e.keyCode;
        // When Z is pressed
        if(keyCode == 65) {
            leftClicked();
        }
        // When ? is pressed
        if(keyCode == 76) {
            rightClicked();
        }
    };
</script>
<!--
<script>
i = 0;
$(document).ready(function(e){

    var d = new Date();
    $("#time_stamp_entered").val(d.getTime());

    $("button").keypress(function(e){
    var d = new Date();
    $("#time_stamp_click").val(d.getTime());

    $("span").text(($("#time_stamp_click").val()-$("#time_stamp_entered").val())/1000);
    });
});
</script>
-->
<script>
  var start =  new Date();

  document.getElementById("id_stop").value = 0;

    $('button').click(function(){
      var local_time = new Date() - start;
      document.getElementById("id_stop").value = local_time/1000;
      document.getElementById("button").submit();
});
</script>

{% endblock %}