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

{% block title %}
    Deduction stage (Period {{ subsession.round_number }} of
    {{ Constants.num_rounds }})
{% endblock %}

{% block inner_content %}

    <div class="card">
        <div class="card-header">
            <b> Instructions for stage 2</b>
        </div>
        <div class="card-body">
            In this stage you can see the decisions and other participants in the your group,
            You can transfer up to <strong>{{ player.punishment_endowment }} points </strong> from your endowment to
            decrease the
            income of these
            participants. By transferring 1 point from your endowment you decrease the income of another
            participant by {{ Constants.punishment_factor }} points.

        </div>
    </div>





    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th>Player:</th>
            {% if subsession.hetero_endowment %}
                <th>Endowment</th>
            {% endif %}
            {% if subsession.gender_shown %}
                <th>Gender</th>
            {% endif %}
            <th>Contibution</th>
            <th>Deduction tokens</th>
            <th>Effect on their payoff:</th>
        </tr>
        </thead>

        {% for i,j in data %}
            <tr>
                <td>{{ forloop.counter }}</td>
                {% if subsession.hetero_endowment %}
                    <td>{{ i.endowment }}</td>
                {% endif %}
                {% if subsession.gender_shown %}
                    <td>{{i.participant.vars.gender}}</td>
                {% endif %}
                <td>{{ i.contribution }}</td>
                <td>{% formfield j label='' %}</td>
                <td id="{{ j.id_for_label }}"></td>
            </tr>
        {% endfor %}
    </table>

    {% next_button %}


{% endblock %}
{% block styles %}
    <style>
        .table {
            display: table !important
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>
        $(function () {
            var pun_factor = {{ Constants.punishment_factor|json }};
            $('div.input-group input').on('input', function () {
                var curvalue = $(this).val();
                var punishment_sent = -curvalue * pun_factor;
                $('td#' + $(this).attr('id')).html(punishment_sent);
            })
        });
    </script>
{% endblock %}