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

{% block title %}
Decision
{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
}
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
</style>
{% endblock %}

{% block content %}
<div class="card info">
    <p>
        You and the charities have an initial endowment of 10 points each.
    </p>
    <p>
        You are given three choices to re-allocate points between you and the charities:
    </p>
   <strong> 1) Take 5 points from the charity for yourself </strong>
    <ul>
        <li> Outcome: 15 points for yourself and 5 points for the charity. </li>
    </ul>

    <strong> 2) No change; leave allocation as it is </strong>
    <ul>
        <li> Outcome: 10 points for yourself and 10 points for the charity. </li>
    </ul>
    <strong> 3) Give 5 points from yourself to the charity </strong>
    <ul>
        <li> Outcome: 5 points for yourself and 15 points for the charity. </li>
    </ul>

    {% formfield player.charity_decision_take %}
</div>
<div class="card info">
    <p>
        You will have <span id="InputSelf" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points and the charity will have <span id="InputCharity" style="display:inline-block; line-height:35px; float: none; height:45px; width:50px; border-radius:5px; text-align:center; border:1px gray; padding:5px 5px;background-color:#D3D3D3"> &nbsp </span>
        points.
    </p>
</div>
<br>

<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="Decision_time" id="Decision_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;

$(document).ready(function() {
    startpage_time = Date.now();
});

function endPage() {
    var endpage_time = Date.now();
    page_time = (endpage_time - startpage_time)/1000;
    document.getElementById('Decision_time').value=page_time;
};

$('#id_charity_decision_take_0').change(function () {
    document.getElementById('InputSelf').innerHTML = 15;
    document.getElementById('InputCharity').innerHTML = 5;
        });
$('#id_charity_decision_take_1').change(function () {
    document.getElementById('InputSelf').innerHTML = 10;
    document.getElementById('InputCharity').innerHTML = 10;
        });
$('#id_charity_decision_take_2').change(function () {
    document.getElementById('InputSelf').innerHTML = 5;
    document.getElementById('InputCharity').innerHTML = 15;
        });

</script>
{% endblock %}