{% extends "global/Base.html" %}
{% load staticfiles otree_tags %}


{% block scripts %}

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 <script>

$(document).ready(function() {

    $('.item-hidden').hide();
    $('.advance-message').show();

    function showButton(){
        $('.item-hidden').show();
        $('.advance-message').hide();
    }

    setTimeout(showButton, 15000)

});
 </script>

{% endblock %}


{% block title %}
    Practice Period Rankings
{% endblock %}

{% block content %}


    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; }
        .tabmarg {margin-left: 80px}
        th, td { padding: 5px; }

    </STYLE>

    <hr>

    {% if condition > 1 %}
        <p>
            Below are the rankings of the managers in your company, as discussed in the instructions you read previously.
        </p>
        {% if condition == 2 %}
            <div class="indented">
                <table class="indented" width="60%" border="1">
                <tbody>
                    <tr>
                        <td colspan="2" align="center"><b>Rank</b></td>
                        <td align="center">Cumulative investment in socially responsible projects</td>
                    </tr>
                    {% for Rank in dollar_rank %}
                        <tr>
                            <td>{{ Rank.rank }}.</td>
                            <td width="40%">{{ Rank.player_label }}{% if Rank.player_label == player.player_label %} (You){% endif %}</td>
                            <td>${{ Rank.value|floatformat:2 }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
        {% endif %}
        {% if condition == 3 %}
            <div class="indented">
                <table class="indented" width="60%" border="1">
                <tbody>
                    <tr>
                        <td colspan="2" align="center"><b>Rank</b></td>
                        <td align="center">Cumulative average impact score of investments</td>
                    </tr>
                    {% for Rank in impact_rank %}
                        <tr>
                            <td>{{ Rank.rank }}.</td>
                            <td width="40%">{{ Rank.player_label }}{% if Rank.player_label == player.player_label %} (You){% endif %}</td>
                            <td>{{ Rank.value|floatformat:1 }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>

        {% endif %}

        {% if condition == 4 %}

                <table width="800px" border="0">
                    <tr>
                        <td width="200px">
                            <table border="1">
                            <tbody>
                                <tr>
                                    <td colspan="2" align="center"><b>Rank</b></td>
                                    <td align="center">Cumulative investment in socially responsible projects</td>
                                </tr>
                                {% for Rank in dollar_rank %}
                                    <tr>
                                        <td>{{ Rank.rank }}.</td>
                                        <td width="70px">{{ Rank.player_label }}{% if Rank.player_label == player.player_label %} (You){% endif %}</td>
                                        <td>${{ Rank.value|floatformat:2 }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                        </td>
                        <td width="20px">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
                        <td width="200px">
                            <table border="1">
                            <tbody>
                                <tr>
                                    <td colspan="2" align="center"><b>Rank</b></td>
                                    <td align="center">Cumulative average impact score of investments<br></td>
                                </tr>
                                {% for Rank in impact_rank %}
                                    <tr>
                                        <td>{{ Rank.rank }}.</td>
                                        <td width="70px">{{ Rank.player_label }}{% if Rank.player_label == player.player_label %} (You){% endif %}</td>
                                        <td>{{ Rank.value|floatformat:1 }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                            </table>
                        </td>
                    </tr>
                </table>

        {% endif %}

        {% if condition == 5 %}
            <div class="indented">
                <table class="indented" width="60%" border="1">
                <tbody>
                    <tr>
                        <td colspan="2" align="center"><b>Rank</b></td>
                        <td align="center">Cumulative potential return (investment × potential social impact score)</td>
                    </tr>
                    {% for Rank in return_rank %}
                        <tr>
                            <td>{{ Rank.rank }}.</td>
                            <td width="25%">{{ Rank.player_label }}{% if Rank.player_label == player.player_label %} (You){% endif %}</td>
                            <td>${{ Rank.value|floatformat:2 }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
                </table>
            </div>
        {% endif %}
    {% endif %}
    <br>
    <hr>
    <p>
        Please proceed to the first performance period.
    </p>
    <hr>
    <br>

    <div class="item-hidden">
        {% next_button %}
    </div>
    <div class="advance-message">
        <p>
            A "Next" button will appear momentarily that you may click to continue.
        </p>
    </div>


{% endblock %}