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

{% block styles %}

    {#    <link href="{% static "public_goods_Wmanager_v2/styles.css" %}" rel="stylesheet">#}

    <style>

        .container {
            margin-left: inherit;
            width: auto;
            position: relative;
        }

        .otree-body {
            max-width: none;
        }

        .informationBody {
            width: 80%;
            float: left;
        }

        .inputWrapper {
            display: inline-block;
            border: 5px outset black;
            border-radius: 20px;
            width: 20%;
            float: right;
            /*position: absolute;*/
            /*top: 50%;*/
            /*margin-top: -10%;*/
            padding: 5px;
        }

        .table {
            margin-bottom: 0px;
            display: inline-table;
            width: 100%;
        }

        .table > tbody > tr > th, .table > tbody > tr > td {
            font-size: x-small;
            padding: 2px;
            height: 30px;
            vertical-align: middle;
        }

        .table > .PRTable > tr > th, .table > .PRTable > tr > td {
            float: none;
            text-align: left;
        }

        td {
            text-align: center;
            vertical-align: middle;
            width: 5%;
        }

        th {
            vertical-align: middle;
            width: 15%;
        }

        .tableRegulator {
            width: auto;
        }

        p, .control-label {
            font-size: x-small;
        }

        .roundStyle {
            font-weight: bold;
            font-size: small;
        }

        .tableWrapper {
            overflow-x: auto;
        }

        /*.formWrapper, .PRWrapper{*/
        /*padding: 5px;*/
        /*margin-top: 3%;*/
        /*}*/

        .page-header {
            display: none;
        }

        .submitStyle {
            float: left;
        }

        .buttonStyle {
            margin-left: 3%;
        }

        .buttonPosition {
            display: inline-block;
            float: right;
            position: absolute;
            bottom: 0;
            padding: 5px;
        }

    </style>

{% endblock %}

{% block content %}
    <!--
<div class="informationBody">
    <h4>
        {{experiment_name}} (<b>Contribution</b>) - This is round {{ round_num }}
    </h4>
    <div class= "tableWrapper">
        <table class="table">
            <tr>
                <th class="roundStyle">Round</th>
                {% for g in group.in_previous_rounds %}
                    <td class="roundStyle">{{ g.round_number }}</td>
                {% endfor %}
                <td class="tableRegulator"></td>
            </tr>

            <tr>
                <th>Your Contribution</th>
                {% for p in player.in_previous_rounds %}
                    <td>{{ p.contribution }}</td>
                {% endfor %}
                <td class="tableRegulator"></td>
            </tr>

            {% for o in player.get_others_in_group %}
                <tr>
                    <th>Player {{ o.id_in_group }}</th>
                    {% for p in o.in_previous_rounds %}
                        <td>
                            {% if p.contribution %}
                                {{ p.contribution }}
                            {% endif %}
                        </td>
                    {% endfor %}
                    <td class="tableRegulator"></td>
                </tr>
            {% endfor %}

            <tr>
                <th>Total Contribution</th>
                {% for g in group.in_previous_rounds %}
                        <td>{{ g.total_contribution }}</td>
                {% endfor %}
                <td class="tableRegulator"></td>
            </tr>
        </table>
    </div>

    <h5>Earnings history including punishment and reward</h5>
    <table class="table tableWrapper">
        <tr>
            <th>Your Earnings</th>
            {% for p in player.in_previous_rounds %}
                <td>{{ p.individual_share_after_PR }}</td>
            {% endfor %}
            <td class="tableRegulator"></td>
        </tr>

        {% for o in player.get_others_in_group %}
            <tr>
                <th>Player {{ o.id_in_group }}</th>
                {% for p in o.in_previous_rounds %}
                    <td>{{ p.individual_share_after_PR }}</td>
                {% endfor %}
                <td class="tableRegulator"></td>
            </tr>
        {% endfor %}

        <tr>
            <th>Group Total Earnings</th>
            {% for g in group.in_previous_rounds %}
                    <td>{{ g.total_payoff }}</td>
            {% endfor %}
            <td class="tableRegulator"></td>
        </tr>

        <tr>
            <th>Your Total Earnings</th>
            {% for p in player.in_previous_rounds %}
                <td>{{ p.payoff }}</td>
            {% endfor %}
            <td class="tableRegulator"></td>
        </tr>
    </table>

    <h5>Manager has Punished/Rewarded</h5>
    <table class="table tableWrapper">
        {% for g in group.get_players %}
            {% if g.id_in_group == 4 %}
                    <tr>
                        {% if player.id_in_group == 1 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 1</th>
                        {% endif %}
                        {% for p in g.in_previous_rounds %}
                        <td>
                            {% if p.punish_1 %}
                                -{{ Constants.punishment_amount }}
                            {% elif p.reward_1 %}
                                +{{ Constants.reward_amount }}
                            {% endif %}
                        </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                    <tr>
                        {% if player.id_in_group == 2 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 2</th>
                        {% endif %}
                        {% for p in g.in_previous_rounds %}
                        <td>
                            {% if p.punish_2 %}
                                -{{ Constants.punishment_amount }}
                            {% elif p.reward_2 %}
                                +{{ Constants.reward_amount }}
                            {% endif %}
                        </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                    <tr>
                        {% if player.id_in_group == 3 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 3</th>
                        {% endif %}
                        {% for p in g.in_previous_rounds %}
                        <td>
                            {% if p.punish_3 %}
                                -{{ Constants.punishment_amount }}
                            {% elif p.reward_3 %}
                                +{{ Constants.reward_amount }}
                            {% endif %}
                        </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                    <tr>
                        {% if player.id_in_group == 4 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 4</th>
                        {% endif %}
                        {% for p in g.in_previous_rounds %}
                        <td>
                            {% if p.punish_4 %}
                                -{{ Constants.punishment_amount }}
                            {% elif p.reward_4 %}
                                +{{ Constants.reward_amount }}
                            {% endif %}
                        </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
            {% endif %}
        {% endfor %}
    </table>
</div> <!--Information Body-->

    <div class="informationBody">
        <h4>
            {{ experiment_name }} (<b>Contribution</b>) - This is round {{ round_num }}
        </h4>
        <div class="tableWrapper">
            <table class="table">
                <tr>
                    <th class="roundStyle">Round</th>
                    {% for g in length %}
                        <td class="roundStyle">number</td>
                    {% endfor %}
                    <td class="tableRegulator"></td>
                </tr>

                <tr>
                    <th>Your Contribution</th>
                    {% for p in length %}
                        <td>{{ player.contribution }}</td>
                    {% endfor %}
                    <td class="tableRegulator"></td>
                </tr>

                {% for o in player.get_others_in_group %}
                    <tr>
                        <th>Player {{ o.id_in_group }}</th>
                        {% for p in length %}
                            <td>{{ o.contribution }}</td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                {% endfor %}

                <tr>
                    <th>Total Contribution</th>
                    {% for g in length %}
                        <td>111</td>
                    {% endfor %}
                    <td class="tableRegulator"></td>
                </tr>
            </table>
        </div>

        <h5>Earnings history including punishment and reward</h5>
        <table class="table tableWrapper">
            <tr>
                <th>Your Earnings</th>
                {% for p in length %}
                    <td>64</td>
                {% endfor %}
                <td class="tableRegulator"></td>
            </tr>

            {% for o in player.get_others_in_group %}
                <tr>
                    <th>Player {{ o.id_in_group }}</th>
                    {% for p in length %}
                        <td>64</td>
                    {% endfor %}
                    <td class="tableRegulator"></td>
                </tr>
            {% endfor %}

            <tr>
                <th>Group Total Earnings</th>
                {% for g in length %}
                    <td>222</td>
                {% endfor %}
                <td class="tableRegulator"></td>
            </tr>

            <tr>
                <th>Your Total Earnings</th>
                {% for p in length %}
                    <td>41</td>
                {% endfor %}
                <td class="tableRegulator"></td>
            </tr>
        </table>

        <h5>Manager has Punished/Rewarded</h5>
        <table class="table tableWrapper">
            {% for g in group.get_players %}
                {% if g.id_in_group == 4 %}
                    <tr>
                        {% if player.id_in_group == 1 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 1</th>
                        {% endif %}
                        {% for p in length %}
                            <td>
                                1
                            </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                    <tr>
                        {% if player.id_in_group == 2 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 2</th>
                        {% endif %}
                        {% for p in length %}
                            <td>
                                -2
                            </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                    <tr>
                        {% if player.id_in_group == 3 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 3</th>
                        {% endif %}
                        {% for p in length %}
                            <td>
                                3
                            </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                    <tr>
                        {% if player.id_in_group == 4 %}
                            <th>You</th>
                        {% else %}
                            <th>Player 4</th>
                        {% endif %}
                        {% for p in length %}
                            <td>
                                -4
                            </td>
                        {% endfor %}
                        <td class="tableRegulator"></td>
                    </tr>
                {% endif %}
            {% endfor %}
        </table>
    </div> <!--Information Body-->


    <div class="inputWrapper">

        {% if player.id_in_group == 4 %}
            <div class="PRWrapper"> <!--PR (Punishment Reward)-->
                <table class="table">
                    <tbody class="PRTable">
                    <tr>
                        <th>Players</th>
                        <th>Punishment</th>
                        <th>Reward</th>
                    </tr>

                    <tr>
                        <td>You</td>
                        <td><input type="checkbox" name="punish_{{ player.id_in_group }}" value="True"></td>
                        <td><input type="checkbox" name="reward_{{ player.id_in_group }}" value="True"></td>
                    </tr>

                    {% for o in player.get_others_in_group %}
                        <tr>
                            <td>Player {{ o.id_in_group }}</td>
                            <td><input type="checkbox" name="punish_{{ o.id_in_group }}" value="True"></td>
                            <td><input type="checkbox" name="reward_{{ o.id_in_group }}" value="True"></td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endif %}


        <div class="formWrapper">
            <p>
                This is a public goods game with
                {{ Constants.players_per_group }} players per group.

            </p>
            <p>In this round you have an endowment of {{ Constants.endowment }}</p>

            <div style="overflow: auto">
                <div class="form-group required">
                    <label class="control-label" for="id_contribution">How much will you contribute (from 0 to
                        100)?</label>

                    <div class="controls  field-contribution">
                        <div class="input-group input-group-narrow submitStyle">
                            <input type="number" name="contribution" required step="1" min="0" max="100"
                                   id="id_contribution" class="form-control">
                            <span class="input-group-addon"></span>
                        </div>
                        <div class="submitStyle buttonStyle">
                            {% next_button %}
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

{% endblock %}