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

{% block title %}

{% endblock %}

{% block scripts %}
    <link rel="stylesheet" href="{% static "jquery-ui.css" %}">


    <script src="{% static "jquery-1.12.4.js" %}"></script>
    <script src="{% static "jquery-ui.js" %}"></script>

    <script src="{% static "jquery-ui-slider-pips.js" %}"></script>
    <script src="{% static "highcharts.js" %}"></script>
    <script src="{% static "series-label.js" %}"></script>
    <script src="{% static "exporting.js" %}"></script>



    <script>
        var $currency_name = $('#id_currency_name').val();
        var Euro = {{ Euro|json }};

        Highcharts.chart('container_euro', {
/*
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
*/
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },

            yAxis: {
                title: {
                    text: 'Earnings in ' +$currency_name
                },
                max: null,
                minTickInterval: 1
            },
            xAxis: {
                    title: {
                        text: 'Number of chips (purchased in period)'
                    },
                    max: 1000,
                    min: 0,
                    minTickInterval: 100
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    marker: {
                        enabled: false
                    },
                    pointStart: 1
                }
            },
            series: Euro,

            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br>Earnings in ' + $currency_name +':' + this.point.y  + '</b><br>Number of chips: ' + this.point.x;
                }
            },
            navigation: {
                buttonOptions: {
                    enabled: true
                    }
            },
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 100
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });

    </script>

{% endblock %}


{% block content %}
    {% csrf_token %}
    {% if player.Currency_exchange_on == 0 %}
    {% include 'double_auction_intro/Instructions.html' %}
    {% elif player.Currency_exchange_on == 1 %}
    {% include 'double_auction_intro/Instructions_ce.html' %}
    {% endif %}

<input type="hidden" id="id_currency_name" value='{{ player.Currency_name }}'>



    {% next_button %}

{% endblock %}