{% 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 the <b>decisions</b> made by <b>another
        participant</b> in an <b>earlier study</b>. Specifically, participants had to make decisions regarding income
        programs similar to those that you previously saw. However, in that study, participants were told that their
        choice will be consequential not for them, but for other individuals. According to that, we are paying you
        and the other participants of this study a bonus depending on the choices that were made in the previous study.
    </p>
</div>

<div class="wrapper textbox">
    <p>
        In the previous study, a participant made a choice between the following two income programs.
    </p>
    <figure class="highcharts-figure">
        <div id="container"></div>
    </figure>
    <p>
        The participant chose program A. Therefore, you and nine other participants of this study will receive bonus
        payments from program A. Our random mechanism has assigned you to be <b>Individual {{ pos }}</b>, and therefore,
        you receive a bonus payment of {{ ecu_bonus }} ECU, which translate to a bonus of <b>{{ bonus }} GBP</b>.
    </p>
</div>

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

{% endblock %}