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

{% block title %}
    Stand nach Runde 30    
{% endblock %}

{% block styles %}
    <link rel="stylesheet" href="{% static "pgg/pgg.css" %}"/>
    <link rel="stylesheet" href="{% static "pgg/chart.css" %}"/>
{% endblock styles %}

{% block scripts %}
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript">     
        var contrib_history = {{ contribution_history|json }};
        var group_history = {{ group_account_history|json }};
        if (contrib_history.length === 0) {
            contrib_history = [null];
        }
        if (group_history.length === 0) {
            console.log('yay');
            group_history = [null];
        }
        
        Highcharts.chart('container', {
            title: {
                text: ''
            },
        
            yAxis: {
                title: {
                    text: 'Token'
                },
                min: 0,
                softMax: 50,
                tickInterval: 5
            },
        
            xAxis: {
                min: 1,
                softMax: 30,
                tickInterval: 1,
                startOnTick: true,
                title: {
                    text: 'Runde'
                },
                plotLines: [
                    {
                        value: 10,
                        dashStyle: 'dash',
                        width: 1,
                        color: '#d33'
                    },
                    {
                        value: 20,
                        dashStyle: 'dash',
                        width: 1,
                        color: '#d33'
                    },
                ]
            },
        
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
            },
        
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 1,
                    animation: 0
                },
            },
            tooltip: {
                valueDecimals: 2,
                headerFormat: "<span style='font-size: 10px'>Runde {point.key}</span><br/>",
            },
            credits: {
                enabled: false
            },
            
            series: [{
                name: 'blaue Token im gemeinsamen Topf am Ende der Runde',
                data: group_history
            }, {
                name: 'durchschnittlicher Beitrag aller Gruppenmitglieder',
                data: contrib_history
            }],
        
        });
    </script>
{% endblock scripts %}

{% block content %}
    <div class="card">
        <div class="card-header">
            Verlauf
        </div>
        <div class="card-body">
            <p>
                Sie haben nun 30 Runden gespielt. Es folgt nun die vierte Einschätzung.
            </p>
            <p>
                In der letzten Runde haben Sie {{ prev_contribution }} <span class="blue">blaue Token</span> in den gemeinsamten Topf gelegt.<br/>
                Aus den {{ end_of_round_blue|floatformat:1 }} <span class="blue">blauen Token</span> im gemeinsamen Topf am Ende der letzten Runde wurde für Sie ein Anteil von {{ prev_payoff|floatformat:1 }} <span class="orange">orange Token</span> generiert und Ihnen gutgeschrieben. Sie besitzen derzeit {{ player.orange_tokens|floatformat:1 }} <span class="orange">orange Token</span>.
            </p>
            <div id="container"></div>
        </div>
    </div>
    
    {% next_button %}


{% endblock %}