{% extends 'layout.html' %}
{% block body %}
    {% include 'header.html' %}
    <div class="container-fluid">
        <div class="row">
            {% include 'navigation.html' %}
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
                {% include 'header_section.html' %}
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="btn mb-2 mb-md-0">
                                <form action="{{ url_for(endpoint , year=year_of_interest) }}" method="POST">
                                    <select id="metric" name="metric" class="form-control form-control-sm"
                                            placeholder=".form-control-sm" required onchange="this.form.submit()">
                                        {% for group in MICROSALT %}
                                            <optgroup label="{{ group.capitalize().replace('_', ' ') }}">
                                            {% for metric in MICROSALT[group] %}
                                                <option value="{{ group }}.{{ metric }}"
                                                        {{ 'selected' if metric == selected_metric }}>
                                                    {{ metric.capitalize().replace('_', ' ') }}
                                                </option>
                                            {% endfor %}
                                        {% endfor %}
                                    </select>
                                </form>
                            </div>
                            <div class="col-lg-12">
                                <div id="sample_info"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>



    <script>
        var series = []
        {% for group in results %}

            var data = []
            {% for date, value, sample_id in results[group] %}
                // in this context january is 0, february 1,..., december 11 thereby date.month-1
                data.push({
                    'x': Date.UTC({{ date.year }}, {{ date.month - 1 }}, {{ date.day }}),
                    'y': {{ value }},
                    'name': {{ sample_id | tojson }},
                    'date': "{{ date.day}}/{{ date.month }}"
                })
            {% endfor %}
            series.push({
                findNearestPointBy: 'xy',
                name: "{{group}}",
                data: data,
                marker: {symbol: 'circle'}
            })
        {% endfor %}
        Highcharts.chart('sample_info', {
            chart: {type: 'scatter'},
            title: {text: '{{metric}} over Time'},
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    month: '%b',
                    year: '%b'
                }
            },
            yAxis: {
                title: {text: {{ metric | tojson }}},
                min: 0
            },
            legend: {
                title: {
                    text: 'Prep Method<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span>',
                    style: {fontStyle: 'italic'}
                },
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            tooltip: {
                formatter: function () {
                    return 'sample ID: <b>' + this.point.name + '</b> <br> {{metric}}: <b>' + this.y + '</b> <br>Prep Date: <b>' + this.point.date + '</b>';
                }
            },
            plotOptions: {
                series: {
                    stickyTracking: false
                },
                spline: {
                    marker: {
                        enabled: true,
                        radius: 2,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            series: series
        });
    </script>
{% endblock %}