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

{% block title %}
    Abfrage {{ player.round_number }} von {{ Constants.num_rounds }}
{% endblock %}

{% block content %}


<table class="table">
  <tr>
    <th></th>
    <th></th>
    <th>Alternative 1</th>
    <th>Alternative 2</th>

  </tr>
  <tr>
    <td>Szenario 1</td>
    <td>Kosten [Euro]</td>
    <td>{{player.A1S1Ziel1}}</td>
    <td>{{player.A2S1Ziel1}}</td>

  </tr>
  <tr>
    <td></td>
    <td>Wartezeit [Min.]</td>
    <td>{{player.A1S1Ziel2}}</td>
    <td>{{player.A2S1Ziel2}}</td>

  </tr>
  <tr>
    <td>Szenario 2</td>
    <td>Kosten [Euro]</td>
    <td>{{player.A1S2Ziel1}}</td>
    <td>{{player.A2S2Ziel1}}</td>

  </tr>
  <tr>
    <td></td>
    <td>Wartezeit [Min.]</td>
    <td>{{player.A1S2Ziel2}}</td>
    <td>{{player.A2S2Ziel2}}</td>

  </tr>
  <tr>
    <td>Szenario 3</td>
    <td>Kosten [Euro]</td>
    <td>{{player.A1S3Ziel1}}</td>
    <td>{{player.A2S3Ziel1}}</td>

  </tr>
  <tr>
    <td></td>
    <td>Wartezeit [Min.]</td>
    <td>{{player.A1S3Ziel2}}</td>
    <td>{{player.A2S3Ziel2}}</td>

  </tr>
  <tr>
    <td>Szenario 4</td>
    <td>Kosten [Euro]</td>
    <td>{{player.A1S4Ziel1}}</td>
    <td>{{player.A2S4Ziel1}}</td>

  </tr>
  <tr>
    <td></td>
    <td>Wartezeit [Min.]</td>
    <td>{{player.A1S4Ziel2}}</td>
    <td>{{player.A2S4Ziel2}}</td>

  </tr>
</table>



<div id="container"></div>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script>
  let Alternative1 = js_vars.Alternative_1;
  let Alternative2 = js_vars.Alternative_2;
</script>

<script>

        Highcharts.chart('container', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Grafische Darstellung der Alternativen'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Kosten (€)'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Wartezeit (Min)'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 5,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} €, {point.y} Min'
                    }
                }
            },
            series: [{
                name: 'Alternative 1',
                color: 'rgba(223, 83, 83, .5)',
                data: js_vars.Alternative_1

            }, {
                name: 'Alternative 2',
                color: 'rgba(119, 152, 191, .5)',
                data: js_vars.Alternative_2
            }]
        });

</script>

    {% formfields %}

    {% next_button %}

{% endblock %}