{% load origin %}
{% origin %}
<div id="chart"></div>
<script>
    var chartConf = {
        chart: {
            type: 'column'
        },
        plotOptions: {
            column: {
                animation: false
            }
        },
        title: {
            text: '{{ stats_title|escapejs }}'
        },
        xAxis: {
            type: "category",
            title: {
                text: 'Country'
            }
        },
        yAxis: {
            title: {
                text: 'Number of attendees'
            }
        },
        tooltip: {
            formatter: function () {
                var s = '<b>' + this.points[0].key + '</b>';

                $.each(this.points, function () {
                    s += '<br>' + chartConf.yAxis.title.text + ': ' + this.y;
                });

                return s;
            },
            shared: true
        },
        series: {{ chart_data }}
    };
</script>
<div id="pie-chart"></div>
<script>
    var pieChartConf = {
        chart: {
            type: 'pie'
        },
        plotOptions: {
            pie: {
                animation: false,
                dataLabels: {
                    enabled: true,
                    format: "{point.name}: {point.percentage:.1f}%"
                },
                enableMouseTracking: false
            }
        },
        title: {
            text: "Countries at IETF {{ meeting.number }}"
        },
        tooltip: {
        },
        series: [ {
            name: "Countries",
            colorByPoint: true,
            data: {{ piechart_data }}
        }]
    };
</script>
<h2>Data</h2>
<table class="table table-sm stats-data tablesorter">
    <thead>
        <tr>
            <th scope="col">Country</th>
            <th scope="col">Percentage of attendees</th>
            <th scope="col">Attendees</th>
        </tr>
    </thead>
    <tbody>
        {% for country, percentage, count, names in table_data %}
            <tr>
                <td>{{ country|default:"(unknown)" }}</td>
                <td>{{ percentage|floatformat:2 }}%</td>
                <td>{% include "stats/includes/number_with_details_cell.html" %}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<p>
    EU (European Union) is not a country, but has been added for reference, as the sum of
    all current EU member countries:
    {% for c in eu_countries %}
        {{ c.name }}{% if not forloop.last %},{% endif %}
    {% endfor %}
    .
</p>