{% extends "global/PageExt.html" %}
{% load otree_tags staticfiles %}
{% block title %}
    Stage 2. Decision. Round {{ view.round_number }} of {{ Constants.num_rounds }}
{% endblock %}


{% block inner_content %}
    <div class="list-group">
        <a href="" class="list-group-item ">
            <h4 class="list-group-item-heading">Your endowment in Stage 2</h4>
            {% if session.config.outgrouponly %}

                <p class="list-group-item-text">You receive <b>{{ player.punishment_endowment }}</b> extra points which
                    you
                    can use to send deduction tokens to
                    a <b>randomly chosen</b> participant from another group or to keep for yourself. </p>


            {% else %}

                <p class="list-group-item-text">You receive <b>{{ player.punishment_endowment }}</b> extra points which
                    you
                    can use to send deduction tokens to
                    other participants or to keep for yourself. </p>
                <p class="list-group-item-text">You can send to each of the two participants from 0
                    to {{ player.punishment_endowment }} points (so that sum of these two amounts is less or
                    equal {{ player.punishment_endowment }}) </p>
            {% endif %}
        </a>
        <a href="" class="list-group-item">
            <h4 class="list-group-item-heading ">You belong to the <span class="text-danger"><strong>
                group {{ player.subgroup }}.</strong></span></h4>
            <p class="list-group-item-text">We now show you the decisions of a <b>randomly</b> chosen pair: one
                participant from your group ({{ player.subgroup }}) who was
                matched with one participant from the other group ({{ player.another_subgroup_name }}).
            </p>
        </a>
        <div class="bs-callout bs-callout-danger">
            <p>
                {% if session.config.outgrouponly %}
                    If you decide to send 1 deduction point to a member of the other group, the income of a
                    <b>randomly</b>
                    chosen
                    member of the other group will be decreased by 3 points.

                {% else %}

                    {% if  session.config.colsan %}

                        If you decide to send 1 deduction point to a member of the other group, the income of a
                        <b>randomly</b>
                        chosen
                        member of the other group will be decreased by 3 points. If you decide to send 1 deduction point
                        to
                        a
                        member of your own group, the income of the participant, <b>whose decision you see</b>, will be
                        decreased by 3 points.


                    {% endif %}
                {% endif %}
            </p>
        </div>
    </div>


    <table class="table table-hover table-striped">
        <thead>

        </thead>
        <tbody>
        <tr class="warning">
            <td>Your group member ({{ player.subgroup }}) sent to a group {{ player.another_subgroup_name }} member:
            </td>
            <td>A group {{ player.another_subgroup_name }} member sent to your group member ({{ player.subgroup }}):
            </td>
        </tr>
        <tr>

            <td>
                <div class="sliders in_sliders"
                     id="pd_ingroup">{{ player.random_pair.ingroup_member.pd_decision }}</div>
            </td>
            <td>
                <div class="sliders out_sliders"
                     id="pd_outgroup">{{ player.random_pair.outgroup_member.pd_decision }}</div>
            </td>
        </tr>
        <tr class="warning">
            <td>Your group member ({{ player.subgroup }}) payoff in Stage 1</td>
            <td>A group {{ player.another_subgroup_name }} member payoff in Stage 1</td>
        </tr>

        <tr>
            <td>
                <div class="sliders in_sliders"
                     id="stage1_in_payoff">{{ player.random_pair.ingroup_member.pd_payoff }}</div>
            </td>
            <td>
                <div class="sliders out_sliders"
                     id="stage1_out_payoff">{{ player.random_pair.outgroup_member.pd_payoff }}</div>
            </td>
        </tr>
        <tr>
            <th>
                {% if session.config.ingroup %}How many deduction points you send to your group member (
                    {{ player.subgroup }}):{% endif %}
            </th>
            <th>How many deduction points you send to a {% if session.config.colsan %}random{% endif %}
                group {{ player.another_subgroup_name }} member:
            </th>
        </tr>
        <tr>
            <td>
                {% if session.config.ingroup %}
                    {% formfield player.ingroup_punishment with label='' %}
                {% endif %}
            </td>
            <td>
                {% if  session.config.outgroup %}
                    {% formfield player.outgroup_punishment with label='' %}
                {% endif %}
            </td>
        </tr>

        <tr class="warning">
            <td>
                {% if session.config.ingroup %}
                    Participant {{ player.subgroup }}'s payoff after that:
                {% endif %}
            </td>
            <td>Participant {{ player.another_subgroup_name }}'s payoff after that:</td>
        </tr>

        <tr>
            <td>
                <div class="sliders in_sliders" id="payoff_in_after"></div>
            </td>
            <td>
                <div class="sliders out_sliders" id="payoff_out_after">{{ player.random_pair.outgroup_member.pd_payoff }}</div>
            </td>
        </tr>
         <tr class="warning">
            <td>
            </td>
            <td>Your remaining endowment in this stage:</td>
        </tr>

        <tr>
            <td>

            </td>
            <td>
                <div class="sliders " id="remaining_endowment">{{ Constants.punishment_endowment }}</div>
            </td>
        </tr>


        </tbody>
    </table>


    {% if session.config.outgrouponly %}

    {% else %}
        {% if session.config.colsan  and  session.config.outgroup %}
            <div class="alert alert-warning alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <p>If you send deduction points to a Participant of another group ({{ player.another_subgroup_name }}),
                    an
                    income of a <b>random</b>
                    participant from group {{ player.another_subgroup_name }}
                    will
                    be decreased.</p>
                <p>
                    <strong>Remember that deduction points you send, are multiplied by 3, i.e. if you send 2 deduction
                        points, the
                        income of the other participant will be decreased by 6 points</strong>
                </p>
            </div>


        {% endif %}

    {% endif %}



    {% next_button %}


    {% include Constants.instructions_stage2_wrapper %}


{% endblock %}
{% block styles %}
    <link href="{% static "colsan_small/colsan.css" %}" rel="stylesheet">

    <style>
        .otree-btn-next {
            margin-top: 20px;
        }

        .table > tbody > tr > td {
            vertical-align: middle !important;
        }

        input.form-control {
            display: inline-block;
            text-align: center;
        }

        div.form-group {
            margin-bottom: 0px;
        }

        red {
            font-weight: bold;
            color: red;
        }

        .sliders {
            font-size: 120%;
            font-weight: bold;
        }


    </style>
{% endblock %}
{% block scripts %}

    <script>
        $(window).keydown(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    </script>
    <script>
        function updatingPayoffs(updater, updatee, curpayoff) {
            if (updater.value < 0) {
                updater.value = 0;
            }
            if (updater.value > max_pun) {
                updater.value = max_pun;
            }
            ;
            pun = pun_coef * updater.value;
            final_payoff = curpayoff - pun;
        }


        var max_pun = {{ Constants.punishment_endowment }};
        var outgroup_punishment_input = document.getElementById('id_outgroup_punishment');
        var pun_coef = {{ Constants.punishment_factor }};
        var pun_out = pun_coef * parseInt(outgroup_punishment_input.value);

        $('#id_outgroup_punishment').keyup(function () {

            var pun_out = $(this).val();
            if (pun_out > max_pun) {
                $(this).val(max_pun);
                pun_out = $(this).val();
            }
            var initial_payoff_out_after = {{ player.random_pair.outgroup_member.pd_payoff }} -(pun_out * pun_coef || 0);
            var remaining_endowment = max_pun - pun_out;
            $('#payoff_out_after').html(initial_payoff_out_after);
            $('#remaining_endowment').html(remaining_endowment);
        })

    </script>


{% endblock %}