{{ block title }}
    Round {{ player.round_number }}
{{ endblock }}
{{ block content }}
  <div style="background-color: white; width: 50%; height: 25px; float:left;">
      <h5> Select words to bid </h5>

  </div>


  </div>
  <div style="background-color: white; width: 50%; height: 550px; float:right;">
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/highcharts-more.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/themes/high-contrast-light.js"></script>

        <figure class="highcharts-figure">
            <div id="container"></div>
            <script>
                // Define custom series type for displaying low/med/high values using boxplot as a base
                Highcharts.seriesType('lowmedhigh', 'boxplot', {
                    keys: ['low', 'median', 'high'],
                    tooltip: {
                        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: ' +
                            'Low <b>{point.low}</b> - High <b>{point.high}</b><br/>'
                    }
                }, {
                    // Change point shape to a line with three crossing lines for low/median/high
                    // Stroke width is hardcoded to 1 for simplicity
                    drawPoints: function () {
                        var series = this;
                        this.points.forEach(function (point) {
                            var graphic = point.graphic,
                                verb = graphic ? 'animate' : 'attr',
                                shapeArgs = point.shapeArgs,
                                width = shapeArgs.width,
                                left = Math.floor(shapeArgs.x) + 0.5,
                                right = left + width,
                                crispX = left + Math.round(width / 2) + 0.5,
                                highPlot = Math.floor(point.highPlot) + 0.5,
                                medianPlot = Math.floor(point.medianPlot) + 0.5,
                                // Sneakily draw low marker even if 0
                                lowPlot = Math.floor(point.lowPlot) +
                                    0.5 - (point.low === 0 ? 1 : 0);

                            if (point.isNull) {
                                return;
                            }

                            if (!graphic) {
                                point.graphic = graphic = series.chart.renderer
                                    .path('point')
                                    .add(series.group);
                            }

                            graphic.attr({
                                stroke: point.color || series.color,
                                'stroke-width': 5
                            });

                            graphic[verb]({
                                d: [
                                    'M', left, highPlot,
                                    'H', right,
                                    'M', left, medianPlot,
                                    'H', right,
                                    'M', left, lowPlot,
                                    'H', right,
                                    'M', crispX, highPlot,
                                    'V', lowPlot
                                ]
                            });
                        });
                    }
                });

                // Create chart
                var chart = Highcharts.chart('container', {
                    chart: {
                        type: 'lowmedhigh'
                    },
                    title: {
                        text: 'Private values',
                        align: 'left'
                    },
                    accessibility: {
                        point: {
                            descriptionFormatter: function (point) {
                                // Use default formatter for null points
                                if (point.isNull) {
                                    return false;
                                }

                                return point.category + ', low ' + point.low + ', median ' +
                                    point.median + ', high ' + point.high;
                            }
                        },
                        series: {
                            descriptionFormat: '{series.name}, series {seriesNumber} of {chart.series.length} with {series.points.length} data points.'
                        },
                        typeDescription: 'Low, median, high. Each data point has a low, median and high value, depicted vertically as small ticks.' // Describe the chart type to screen reader users, since this is not a traditional boxplot chart
                    },
                    xAxis: [{
                        accessibility: {
                            description: 'Year'
                        },
                        crosshair: true,
                        categories: ['Pizza', 'Food delivery', 'Sushi']
                    }],
                    yAxis: {
                        title: {
                            text: 'Values'
                        },
                        min: 40
                    },
                    tooltip: {
                        shared: true,
                        stickOnContact: true
                    },
                    plotOptions: {
                        series: {
                            stickyTracking: true,
                            whiskerWidth: 5
                        }
                    },
                    colors: [
                    '#00C5FF',
                    '#D03200',
                    '#18E566'
                    ],
                    series: [{
                        name: 'You',
                        data: js_vars.v1
                    }, {
                        name: 'Opponent',
                        data: js_vars.v2
                    }, {
                        name: 'Reserve Price',
                        data: js_vars.noise
                    }]
                });

                // Remove click events on container to avoid having "clickable" announced by AT
                // These events are needed for custom click events, drag to zoom, and navigator
                // support.
                chart.container.onmousedown = null;
                chart.container.onclick = null;

            </script>
        </figure>

  </div>

  <div style="background-color: white; width: 17%; height: 50px; float:left;">
        {{ formfield "bid_1" }}
  </div>

  <div style="background-color: white; width: 16%; height: 100px; float:left;">
        {{ formfield "bid_2" }}
  </div>

  <div style="background-color: white; width: 17%; height: 50px; float:left;">
        {{ formfield "bid_3" }}
  </div>

  <div style="background-color: white; width: 50%; height: 400px; float:left;">
      {{ chat }}
      {{ next_button }}<br>
      Pizza's and Sushi's CTR - 5 people for 1st place, 2 people for 2nd <br>
      Food Delivery's CTR - 10 people for 1st place, 4 people for 2nd
  </div>

{{ endblock }}