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



{% block scripts %}
    <script type="text/javascript">
        window.onload = function () 
        {
            document.getElementById('arrive_time').value = (new Date()).toISOString()
            document.getElementById('mode').value = {{ mode | json }}
            document.getElementById('rebate').value = {{ rebate | json }}
            document.getElementById('charity').value = {{ charity | json }}
        }

        calc_money_kept = function()
        {
            //how to access form field value inside template?
            // var donated = document.getElementById('donated').value
            // var kept = 10.0 - donated
            var donated = document.getElementById('donated').value
            document.getElementById('kept').value = {{ Constants.endowment | json }} - donated
        }
    </script>
{% endblock %}

{% block title %}
    <font color=#4b82c1>
        Decision {{ round_num }} - <b>{{ mode }}</b> with <b>{{ rebate }}%</b> rebate
    </font>
{% endblock %}

{% block content %}
    
    <div>
        <!-- form fields for all metadata (not directly collected from players) -->
        <input type="hidden" name="time_Decision" id="arrive_time"/>
        <input type="hidden" name="mode" id="mode"/>
        <input type="hidden" name="rebate" id="rebate"/>
        <input type="hidden" name="charity_dec" id="charity"/>
        
        <input type="hidden" name="money_kept" id="kept"/>
    </div>
    <div>
        <p>
            Out of the <b>${{ Constants.endowment }}</b> you are endowed with for this period,
            would you like to donate any to the charity of your choice?
            {% if rebate != 0 %}
            While you are donating, the UCSC LEEPS lab would like to offer you a rebate of
            <b>{{ rebate }}%</b> of your donation.
            {% else %}
                You will not receive any rebates of your donation.
            {% endif %}
        </p>
        {% if mode == 'Public' %}
            <p>
                If your decision in this period is chosen for payment AND:
                <ul>

                    <li> If you donated a <b>positive</b> amount ($1-$10) in this decision,
                        you will receive the following message on your <b>social media</b>:
                        {% if rebate != 0 %}
                            <font color=#4b82c1>“Thank you for donating $X to {{ charity }}, with a {{ rebate }}%
                                rebate offered by the UCSC LEEPS Lab!”</font>
                        {% else %}
                        <font color=#4b82c1>“Thank you for donating $X to {{ charity }}!"</font>
                        {% endif %}
                    </li>
                    <li> If you <b>did not</b> donate any amount ($0) in this decision, you <b>will
                        not</b> receive any messages on your social media timeline.
                    </li>
                </ul>
            </p>
        {% else %}
            <p>
                If your decision in this period is chosen for payment AND:
                <ul>
                    <li> If you donated a <b>positive</b> amount ($1-$10) in this decision,
                        you will receive the following message <b>privately</b> on your screen:
                        {% if rebate != 0 %}
                            <font color=#4b82c1>“Thank you for donating $X to {{ charity }}, with a {{ rebate }}%
                                rebate offered by the UCSC LEEPS Lab!”</font>
                        {% else %}
                        <font color=#4b82c1>“Thank you for donating $X to {{ charity }}!"</font>
                        {% endif %}
                    </li>
                    <li>
                        If you <b>did not</b> donate any amount in this decision ($0), you <b>will
                        not</b> receive any messages on your computer screen.
                    </li>
                </ul>
            </p>
        {% endif %}
        
    </div>
    <div>
        <label for="donated"><font color=#4b82c1>How much would you like to donate?</font></label>
        <input type="number" name="money_donated" id="donated" max="10" min="0"/>
    </div>
    <div>
        <button id="submit" class="btn btn-primary btn-large next-button" 
            style="float: right;" onclick="calc_money_kept()">Submit Decision</button>
    </div>

{% endblock %}


{% comment %}

{% endcomment %}