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

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

{% block scripts %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>


<script>
Highcharts.setOptions({
  lang: {
    numericSymbols: null
  }
});
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Income according to income programs A and B'
  },
  xAxis: {
    categories: ['Ind. 1', 'Ind. 2', 'Ind. 3', 'Ind. 4', 'Ind. 5', 'Ind. 6', 'Ind. 7', 'Ind. 8', 'Ind. 9', 'Ind. 10']
  },
  yAxis: {
    title: {
        text: 'Income'
    },
  },
  plotOptions: {
        series: {
            enableMouseTracking: false
        }
    },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Program A',
    data: {{ data_a|json }}
  }, {
    name: 'Program B',
    data: {{ data_b|json }}
  }]
});
</script>
{% endblock %}

{% block title %}
    Bonus payment
{% endblock %}


{% block content %}
<div class="wrapper textbox">
    <p>
        In this stage, you receive a <b>bonus payment</b> which is based on your preference regarding two income
        distributions. Note that you can <b>choose which of the distributions</b> will be relevant for the bonus payment,
        but you will then receive a <b>random payment</b> out of the 10 possible payments.
    </p>
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>
</div>

<div class="wrapper attentionbox">
    {% formfield player.preference %}
</div>

<button class="otree-btn-next btn btn-primary">Submit</button>

{% endblock %}