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

{% block title %}

{% endblock %}

{% block content %}

{%  if subsession.round_number < 2 %}

<!-- cf base.html, where the class fullwidth is defined -->
<div class="fullwidth">



<!-- this is the table -->
    <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>

                {% include "LtF/table_init.html" %}

            </tbody>
        </table>

    </div>

    <!-- this is the graph -->
    <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">


               {% include "LtF/table_pre.html" %}


    <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%}



<!-- now and tomorrow have been created in the data dictionary,   means translatoin so can be ignored-->
<div class="periodblock" >
<b> <strong>  Now we are in period {{now}}, and you have to make your forecast about inflation in period {{tomorrow}}.</strong></b>
</div>



<!-- in base.html periodblock, nextblock, etc. are defined: their position, alignement, size, etc. -->
<div class= "nextblock">
<b>{% trans " Please pick a number (decimals allowed):"  %}</b>
 {% formfield player.guess_pi label="" %}
 {% formfield player.guess_y label="" %}
    {% next_button %}


</div>

<!-- this is a new block not defined in Base.html, with a counter -->
<div  style="display:block;position: fixed;top:0; left: 0;height:10px;text-align: left;" >
		<div style="padding-top: 17px;padding-left: 35px;height:10px">
 <div class="counter" id="countdown" style="float:right;"></div>
		</div>
</div>



{% endblock %}

{% block scripts %}

    <script>


// here are where problems are with the table, changes the width of the header depending on the size of each column, works only if body content > header.

                    // 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" %}


/// here is the function that creates the counter:
        function countdown( elementName, minutes, seconds )
{
    var element, endTime, hours, mins, msLeft, time;

    function twoDigits( n )
    {
        return (n <= 9 ? "0" + n : n);
    }

    function updateTimer()
    {
        msLeft = endTime - (+new Date);
        if ( msLeft < 1000 ) {
            element.innerHTML = "Time is up!";
        } else {
            time = new Date( msLeft );
            hours = time.getUTCHours();
            mins = time.getUTCMinutes();
            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
        }
    }

    element = document.getElementById( elementName );
    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
    updateTimer();
}
var a = "{{subsession.round_number }}"

// for the first 4 give them 1 minute 30, then 1:15, then 1.
if (a<4){
    countdown( "countdown", 1, 30);
    } else if (a<6) {
    countdown( "countdown", 1, 15 );
    } else     {
    countdown( "countdown", 1, 0 );
     }



</script>



{% endblock %}