{{ block title }}Results{{ endblock }}
{{ block content }}
    <div class="card bg-light m-3">
    <div class="card-body">
<p>
    Round {{ subsession.round_number }} out of 20: <br>
<br>
    {{ if not player.decision }}
    You invested <b>{{ player.invest_amount }}%</b> of your research points in the asset.<br>
    {{ else }}
    The recommendation was to invest <b>{{ player.invest_amount }}%</b> of your research points in the asset. <br>
    {{ endif }}
<br>
    {{ if player.pos }}
    The asset increased by <b>{{ player.asset_change }}%</b>.<br>
    {{ else }}
    The asset decreased by <b> {{ player.asset_change }}%</b>.<br>
    {{ endif }}
<br>
    Therefore, your return for this round is <b>{{ player.invest_return }} points.</b><br>
<br>
    Your cumulative return across all rounds is <b> {{ player.c_return }} points.</b><br>
<br>
    You now have <b>{{ player.ending_endow }} research points.</b>


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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<br>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div2"></div>

<script>
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawBasic);

    function drawBasic() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Round');
        data.addColumn('number', 'Price');

        var roundNumber = {{ subsession.round_number }};

        data.addRows([
            [0, 100],
            [1, {{ participant.ap1 }}],
            [2, {{ participant.ap2 }}],
            [3, {{ participant.ap3 }}],
            [4, {{ participant.ap4 }}],
            [5, {{ participant.ap5 }}],
            [6, {{ participant.ap6 }}],
            [7, {{ participant.ap7 }}],
            [8, {{ participant.ap8 }}],
            [9, {{ participant.ap9 }}],
            [10, {{ participant.ap10 }}],
            [11, {{ participant.ap11 }}],
            [12, {{ participant.ap12 }}],
            [13, {{ participant.ap13 }}],
            [14, {{ participant.ap14 }}],
            [15, {{ participant.ap15 }}],
            [16, {{ participant.ap16 }}],
            [17, {{ participant.ap17 }}],
            [18, {{ participant.ap18 }}],
            [19, {{ participant.ap19 }}],
            [20, {{ participant.ap20 }}]
        ].slice(0, roundNumber + 1));

        var options = {
            hAxis: { title: 'Round', minValue: 0, maxValue: 20, multiples: 1, gridlines: { count: 20 }},
            vAxis: { title: 'Price'},
            title: 'Asset Price'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>


<script>
    google.charts.load('current', {packages: ['corechart', 'line']});
    google.charts.setOnLoadCallback(drawBasic);
    function drawBasic() {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Round');
        data.addColumn('number', 'Points');

        var roundNumber = {{ subsession.round_number }};

        data.addRows([
            [0, 500],
            [1, {{ participant.r1 }}],
            [2, {{ participant.r2 }}],
            [3, {{ participant.r3 }}],
            [4, {{ participant.r4 }}],
            [5, {{ participant.r5 }}],
            [6, {{ participant.r6 }}],
            [7, {{ participant.r7 }}],
            [8, {{ participant.r8 }}],
            [9, {{ participant.r9 }}],
            [10, {{ participant.r10 }}],
            [11, {{ participant.r11 }}],
            [12, {{ participant.r12 }}],
            [13, {{ participant.r13 }}],
            [14, {{ participant.r14 }}],
            [15, {{ participant.r15 }}],
            [16, {{ participant.r16 }}],
            [17, {{ participant.r17 }}],
            [18, {{ participant.r18 }}],
            [19, {{ participant.r19 }}],
            [20, {{ participant.r20 }}]
        ].slice(0, roundNumber + 1));

        var options = {
            hAxis: { title: 'Round', minValue:0, maxValue:20, multiples: 1, gridlines: { count: 20 }},
            vAxis: { title: 'Research Points'},
            'title' : 'Total Research Points'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div2'));

        chart.draw(data, options)

    }
</script>

    <p>{{ next_button }}</p>

{{ endblock }}