{% extends "LtF/Base.html" %}
{% load staticfiles otree %}
{% load i18n %}

{% block title %}
{% trans "Please wait for the others to submit their forecasts" %}
{% endblock %}

{% block content %}
            <div class="progress progress-striped active" id='waitingIndicator'>
                <div class="progress-bar progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
            </div>

{%  if subsession.round_number < 2 %}

<div class="fullwidth">


    <div id="tabera">

        <table align="center" class="table" id="table2"  >
            <thead>
                <tr>
                    <th> # </th>
                    <th> {%trans "Output" %}</th>
                    <th> {% trans "Interest" %}</th>
                    <th> {% trans "Inflation" %}</th>
                    <th> {% trans "Expectation" %}</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td> 2</td>
                <td style="width:90px;">    </td>
                <td style="width:90px;">    </td>
                <td style="width:99px;">    </td>
                <td > {{temp_pi}}%   </td>
                    </tr>

                 <tr>
                <td> 1</td>
                <td style="width:70px;">    </td>
                <td style="width:170px;">    </td>
                <td style="width:70px;">    </td>
                <td style="width:90px;">    </td>
                    </tr>
                    <tr>
                <td> 0</td>
                <td>  {{ Constants.y_init2_an }}%</td>
                <td> {{Constants.i_init2_an}}% </td>
                <td> {{Constants.p_init2_an}}%</td>
                <td style="width:90px;">    </td>
                    </tr>
                <tr>
                <td> -1</td>
                <td>  {{Constants.y_init1_an}}%</td>
                <td> {{Constants.i_init1_an}}% </td>
                <td> {{Constants.p_init1_an}}%</td>
                    <td>    </td>
                    </tr>

            <tr>
                <td> -2</td>
                <td>  {{Constants.y_init0_an}}%</td>
                <td> {{Constants.i_init0_an}}% </td>
                <td> {{Constants.p_init0_an}}%</td>
                <td>    </td>
                    </tr>


            </tbody>
        </table>

    </div>

    <div id="resultgraphs">
    <div style="width:100%;height:100%;overflow-x:auto;overflow-y:hidden;direction:ltr">
    <div style="height:100%;width:150%;direction:ltr" >
    <div id="chart_exp" style=" height: 50%;width:100%;"></div>
    <div  id="chart_fund" style=" height: 50%;width:100%;"></div>
    </div>
        </div>
        </div>

</div>

{% endif %}

{%if subsession.round_number >= 2%}

<div class="fullwidth">


                   <div id="tabera">
        <table class="table" id="table2" >
            <thead>
                <tr>
                    <th> # </th>
                    <th> {% trans "Output" %}</th>
                    <th> {% trans "Interest" %}</th>
                    <th> {% trans "Inflation" %}</th>
                    <th> {% trans "Expectation" %}</th>
                    <th> {% trans "Score" %}</th>
                </tr>
            </thead>
            <tbody>
                            <tr>
                    {% for p in player_in_all_rounds %}

                    {% if p.subsession.round_number == now %}
                    <td> {{tomorrow}} </td>
                    <td style="width:90px;">    </td>
                    <td style="width:80px;">    </td>
                    <td style="width:80px;">    </td>
                    <td style="width:90px;"> {{p.guess_pi}}% </td>
                    <td style="width:65px;">  </td>
                    {% endif %}
                    {% endfor %}


            </tr>
                <tr>
                    {% for p in player_in_all_rounds %}

                    {% if p.subsession.round_number == yesterday %}
                    <td> {{now}} </td>
                    <td style="width:70px;">    </td>
                    <td style="width:70px;">    </td>
                    <td style="width:70px;">    </td>
                    <td style="width:90px;"> {{p.guess_pi}}% </td>
                    <td style="width:55px;">  </td>
                    {% endif %}
                    {% endfor %}


            </tr>
                {% for seed in temp_A %}
                {% for p in player_in_all_rounds %}

                {% if p.subsession.round_number == seed %}
                    <tr>
                        <td> {{p.subsession.round_number }}</td>
                        <td> {{p.group.y_an}}%</td>
                        <td> {{p.group.i_an}}% </td>
                        <td> {{p.group.pi_an}}%</td>
                        {% if p.guess_pi_lag == None %}
                        <td>  </td>
                             {% elif p.guess_pi_lag != None %}
                        <td>     {{p.guess_pi_lag}} % </td>
                             {% endif %}

                        {% if p.score == None %}
                        <td>  </td>
                             {% elif p.score != None %}
                        <td>     {{p.score}}  </td>
                             {% endif %}
                    </tr>
                {% endif %}
                {% endfor %}
                {% endfor %}
                                        <td> 0</td>
                <td>  {{Constants.y_init2_an}}%</td>
                <td> {{Constants.i_init2_an}}% </td>
                <td> {{Constants.p_init2_an}}%</td>
                <td></td>
                <td></td>
                    </tr>
                <tr>
                <td> -1</td>
                <td>  {{Constants.y_init1_an}}%</td>
                <td> {{Constants.i_init1_an}}% </td>
                <td> {{Constants.p_init1_an}}%</td>
                <td></td>
                <td></td>
                    </tr>

            <tr>
                <td> -2</td>
                <td>  {{Constants.y_init0_an}}%</td>
                <td> {{Constants.i_init0_an}}% </td>
                <td> {{Constants.p_init0_an}}%</td>
                <td></td>
                <td ></td>
                    </tr>
            </tbody>
        </table>
    </div>

    <div id="resultgraphs">
    <div style="width:100%;height:100%;overflow-x:auto;overflow-y:hidden;direction:ltr">
    <div style="height:100%;width:150%;direction:ltr" >
    <div id="chart_exp" style=" height: 50%;width:100%;"></div>
    <div  id="chart_fund" style=" height: 50%;width:100%;"></div>
    </div>
</div>
</div>


</div>




{%endif%}




<div class="periodblock" >

 <div class="counter" id="countdown" style="float:right;"></div>
</div>
</div>




<div class= "nextblock">


</div>





{% endblock %}

{% block scripts %}


    <script>
                    // Change the selector if needed
var $table = $('table.table'),
    $bodyCells = $table.find('tbody tr:eq(0)').children(),
    colWidth;

// Adjust the width of thead cells when window resizes
$(window).resize(function() {
    // Get the tbody columns width array
    colWidth = $bodyCells.map(function() {
        return $(this).width();
    }).get();

    // Set the width of thead columns
    $table.find('thead tr').children().each(function(i, v) {
        $(v).width(colWidth[i]);
    });
}).resize(); // Trigger resize handler
{% include "LtF/FinalResults.js" %}
{% include "LtF/Exp.js" %}

</script>


<script type="text/javascript">
$(document).ready(function () {

    var socket;

    initWebSocket();

    function initWebSocket() {

        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        var ws_path = ws_scheme + '://' + window.location.host + "{{ view.socket_url|safe }}";
        socket = new ReconnectingWebSocket(ws_path);
        socket.onmessage = function(e) {

            var data = JSON.parse(e.data);

            // Handle errors
            if (data.error) {
                // maybe the div's default text doesn't get shown
                $("#error-notice").text(data.error);
                $("#error-notice").show();
                return;
            }

            console.log('Received redirect message', e.data);
            window.location.href = '{{ view.redirect_url|safe }}';

        };
        socket.onopen = function() {
            console.log('WebSocket connected');
        };
        socket.onclose = function() {
            console.log('WebSocket disconnected');
        };
    }

 });
 </script>

{% endblock %}