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


{% block title %}Feedback{% endblock %}

{% block content %}


<script type="text/javascript">

</script>

 <div id="container" ></div>

{%block script%}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>
 var chart = Highcharts.chart('container', {



    title : {
    text: ''
    },

    yAxis:[{
        min: 0,
        Max: 500,
        tickAmount: 11,
        tickInterval: 50,
        startOnTick: false,
        endOnTick: false,
        opposite: true,
        }, {
        title: {
            text: 'Price'
        }}],


    xAxis: {
        accessibility: {
            rangeDescription: 'Period'

        },
        title: {
        text: 'Period'
        }


    },


    series: [{
        name: '',
        data:{{series|json}},
        lineWidth: 4},
        {
         name: '',
         data: [[99,{{UpperPrice|json}}],[99,{{LowerPrice|json}}]],
         lineWidth: 4},
         {
         name: '',
         data: [[99,{{Next_Price|json}}]],
         lineWidth: 20}],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 750
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});



</script>

{% endblock %}
<div>

<div class="card bg-light description w-50 " style="display:inline;align:top;float:left;">
    <div class="card-body" >

    You predicted the highest next price as:
        <strong>
        <br> {{UpperPrice|json}}
        </strong>

<br>
<br>
     You predicted the lowest next price as:
        <strong>
        <br> {{LowerPrice|json}}
        </strong>
        <br>

            The next price is :
        <strong>
        <br> {{Next_Price|json}}
        </strong>
        <br>
<br>

    </div>
</div>

<div class="card bg-light description w-50 " style="display:inline;align:centre;float:right;height:225px;">
    <div class="card-body" >

        <div style = "font-size: 120%;"></div>  Your payment for this round is:
        <strong>
            <div style = "text-align:center;">
                {{Payoff|json}}
            </div>
            </strong>

        <br>

        <div style = "font-size: 120%;"></div> Your payoff between round 1 to {{F_RoundNumber|json}}:


        <strong>
            <div style = "text-align:center;">
                {{Total_Payoff|json}}
            </div>
        </strong>

        <br>

<button class="otree-btn-next btn btn-primary" style="float: right">Next--></button>



</div>
</div>
</div>






{% endblock %}