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


{% block app_styles %}

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

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

        .form-control {
            border-color: white;
        }

        .form-control:focus {
            border-color: #3500D3;
        }

        #punish-or-reward-div {
            margin-left: -50px;
            margin-right: -50px;
            padding-right: 50px;
            overflow: hidden;
            background-color: #350FFF;
            position: fixed;
            top: 56px;
        }

        #punish-or-reward-table th {
            border-right: dashed 2px;
            text-align: center;
        }

        #punish-or-reward-table th:last-child {
            border-right: none;
        }

        #punish-or-reward-table td:nth-child(3n+0) {
            border-right: dashed 2px;
        }

        #punish-or-reward-table td:last-child {
            border-right: none;
        }
    </style>

{% endblock %}


{% block content %}

    <nav id="navbar-main" class="navbar fixed-top navbar-dark" style="background-color: #3500D3">
        <a class="navbar-brand" href="#"><img src="{% static "PGG5/pgg_logo.png" %}" height="30px"
                                              style="padding-right: 10px">Punish or Reward</a>
        <ul class="nav navbar-nav navbar-right" style="flex-direction: row">
            <li class="navbar-text" style="padding-right: 10px">
                <img src="{% static "PGG5/submit_here.png" %}" height="20">
            </li>
            <li>{{ form.contribution }}</li>
            <li>
                <button class="btn btn-primary otree-btn-next btn-outline-light" type="submit">Submit</button>
            </li>
        </ul>
    </nav>

    <div id="punish-or-reward-div">
        <table id="punish-or-reward-table"
               style="width: 100%; table-layout: fixed; font-family: Sans-Serif; color: white">
            <tr>
                {% for p in group.get_players %}
                    <th colspan="3">
                        For player
                        {{ p.id_in_group }}
                        {% if p.role == "manager" %} (You) {% endif %}
                        :
                    </th>
                {% endfor %}
            </tr>
            <tr>
                {% for field in form %}
                    {% for choice in field %}
                        <td style="text-align: center">{{ choice }}</td>
                    {% endfor %}
                {% endfor %}
            </tr>
        </table>
    </div>

    <div style="padding-top: 40px">
        <h4 style="margin-top: 20px">Contributions <span style="font-size: small; color: blue; padding-left: 10px">C: contribution, E: earning</span></h4>
        {% include "PGG5/ContributionTableManager.html" %}
        <h4 style="margin-top: 50px">Punishments / Rewards</h4>
        {% include "PGG5/ReinforcementTable.html" %}
    </div>

{% endblock %}


{% block scripts %}

    <script>

        $(document).ready(function () {
            document.getElementById("punish-or-reward-div").style.top =
            document.getElementById("navbar-main").offsetHeight + "px"
        })

    </script>

{% endblock %}