{{extends 'pre_survey/BasePage.html'}}
{{ block title }}{{ endblock }}
{{ block content }}
<style type="text/css">
    #hsgraph { height: 400px; }
    .highcharts-figure, .highcharts-data-table table { min-width: 310px; max-width: 800px; margin: 1em auto; }
</style>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div class="container">
    <div class="panel info"><h3 class="lead center"><b>Allocation choice 2</b></h3></div>
</div>
<div class="container">
    <div class="block block-radius block-primary">
        <div class="block-content">
            <p>Please choose your preferred allocation of points between you and the other person from the list allocations shown in the figure below.</p>
            <figure class="highcharts-figure"><div id="hsgraph"></div></figure>
            <div style="text-align: center; margin-top: 20px;">
                <span style="display:inline-block; vertical-align: middle;">My choice is Allocation:</span>
                <span style="display:inline-block; vertical-align: middle; margin-left: 10px;">
                    {{ formfield player.Epper_allocation_02 label="" }}
                </span>
            </div>
        </div>
    </div>
</div>
<div class="container"><div class="center"><button class="btn btn-primary btn-large">Next</button></div></div>

<script>
Highcharts.Templating.helpers.abs = value => Math.abs(value);
const categories = ['1', '2', '3', '4', '5', '6', '7'];
Highcharts.chart('hsgraph', {
    chart: { type: 'bar' }, title: { text: null },
    xAxis: [{ categories: categories, reversed: true, labels: { format: 'Allocation # {value}' }, lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent' }, { opposite: true, reversed: true, categories: categories, linkedTo: 0, labels: { enabled: false }, lineWidth: 0, minorGridLineWidth: 0, lineColor: 'transparent' }],
    yAxis: { title: { text: null }, labels: { enabled: false }, gridLineWidth: 0 },
    tooltip: { formatter: function () { return '<b>Allocation ' + this.x + '</b><br/>' + this.series.name + ': ' + Math.abs(this.y); } },
    plotOptions: { bar: { dataLabels: { enabled: true, formatter: function() { var color = this.y < 0.0 ? '#8FA2CA' : '#9CAD9F'; return '<span style="color: ' + color + '">' + Math.abs(this.y) + ' </span>'; }, inside: false, padding: 10, y: -1 } }, series: { stacking: 'normal' } },
    series: [{ name: 'Points you receive', data: {{ C.Epper_alloc_07_me|json }}, enableMouseTracking: true, color: '#8FA2CA' }, { name: 'Points other person receives', data: {{ C.Epper_alloc_07_other|json }}, enableMouseTracking: true, color: '#B5C6B8' }],
    legend: { layout: 'horizontal', align: 'center', verticalAlign: 'top', floating: false, x: 0, y: 0 }, credits: { enabled: false },
});
</script>
{{ endblock }}