{% block app_styles %}

<style type="text/css">

    .div_result{
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        background-color: #ececec;
    }


    .highcharts-figure, .highcharts-data-table table {
        min-width: 310px; 
        max-width: 800px;
        margin: 1em auto;
    }

    #wrapper {
        width: 800px;
        border: 0px;
        overflow: hidden;
    }

    #container_abs{
        height:250px;
        width:350px;
        float:left;
    }
    #container_rel{
        height:250px;
        width:350px;
        float:right;
    }



    .highcharts-data-table table {
        font-family: Verdana, sans-serif;
        border-collapse: collapse;
        border: 1px solid #EBEBEB;
        margin: 10px auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }
    .highcharts-data-table caption {
        padding: 1em 0;
        font-size: 1.2em;
        color: #555;
    }
    .highcharts-data-table th {
        font-weight: 600;
        padding: 0.5em;
    }
    .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
        padding: 0.5em;
    }
    .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
        background: #f8f8f8;
    }
    .highcharts-data-table tr:hover {
        background: #f1f7ff;
    }

</style>

{% endblock %}

{% block app_scripts %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
    Highcharts.chart('container_abs', {
        chart: {
            type: 'bar',
            backgroundColor: '#ececec'
        },
        title: {
            text: 'Absolute contribution split',
            style:{
                fontSize: '12px'
            }
        },
        xAxis: {
            categories: ['Player 1', 'Player 2', 'Player 3']
        },
        yAxis: {
            min: 0,
            gridLineColor:'#999999',
            title: {
                text: ''
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'retained',
            data: [js_vars.ret1, js_vars.ret2, js_vars.ret3],
            color: '#785ef0'
        }, {
            name: 'contributed',
            data: [js_vars.contribution1, js_vars.contribution2, js_vars.contribution3],
            color: '#ffb000'
        }]
    });
</script>
<script>
    Highcharts.chart('container_rel', {
        chart: {
            type: 'bar',
            backgroundColor: '#ececec'
        },
        title: {
            text: 'Relative contribution split (in %)',
            style:{
                fontSize: '12px'
            }
        },
        xAxis: {
            categories: ['Player 1', 'Player 2', 'Player 3']
        },
        yAxis: {
            min: 0,
            gridLineColor:'#999999',
            title: {
                text: ''
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'percent'
            }
        },
        series: [{
            name: 'retained',
            data: [js_vars.ret1, js_vars.ret2, js_vars.ret3],
            color: '#785ef0'
        }, {
            name: 'contributed',
            data: [js_vars.contribution1, js_vars.contribution2, js_vars.contribution3],
            color: '#ffb000'
        }]
    });
</script>
{% endblock %}

{{ block title }}Results{{ endblock }}
{{ block content }}

<p>
    You started with an endowment of {{participant.endowment}} points
    of which you contributed {{ player.contribution }} to the public good.
    Total contributions to the public good in your group were {{ group.total_contribution }} points. This produced a public good of {{pg}} points,
    of which your share is {{ pg_share }} points.<br/>
    <br/>
    Your <b>payoff</b> in this round: <b>{{ display_payoff }} points</b>.<br/>
</p>

{{ next_button }}

<div style="height:10px"></div>

<p>
    <small>
        <b>Detailed Summary</b>
    </small>
</p>
<div class='div_result'><small>
    <b>Public Good Contributions:</b><br/>
    Player 1: {{contribution1}} of {{endowment1}} [{{fraction1}}%] {{if player.role == "Player 1"}} <b>(you)</b>{{endif}}<br/>
    Player 2: {{contribution2}} of {{endowment2}} [{{fraction2}}%] {{if player.role == "Player 2"}} <b>(you)</b> {{endif}}<br/>
    Player 3: {{contribution3}} of {{endowment3}} [{{fraction3}}%] {{if player.role == "Player 3"}} <b>(you)</b> {{endif}}<br/>
    <br/>
    Public good produced: {{pg}}<br/>
    <br/>
    <b>Payoff:</b><br/>
    Your share of the public good: {{pg_share}}<br/>
    Your retained endowment: {{ret_endow}}<br/>
    Your payoff: {{display_payoff}}
</small>




<!--
<p>
    DEBUG:<br/>
    Nominal payoff:{{ player.nominal_payoff }}<br/>
    Actual payoff: {{player.payoff}}
</p>-->

<figure class="highcharts-figure">
    <div id='wrapper'>
        <div id="container_abs"></div>
        <div id="container_rel"></div>
    </div>
</figure>
</div>
{% endblock %}