{% 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('home.index')}}" method="POST">
                                        <input type="hidden" name="endpoint" value="{{endpoint}}">
                                            <select id="reagent_label" name="reagent_label" class="form-control form-control-sm"
                                                placeholder=".form-control-sm" required onchange="this.form.submit()">
                                                <option value="">Select reagent label...</option>
                                                {% for category in index_categories %}
                                                    <optgroup label="{{ category['_id']['category']}}" >
                                                    {% for name in category['reagent_labels'] %}
                                                    <option value="{{name}},{{category['_id']['category']}}" {{ 'selected' if name.replace(' ', '') == reagent_label }}>
                                                    {{ name}}
                                                    </option>
                                                    {% endfor %}
                                                {% endfor %}
                                            </select>
                                    </form>
                                </div>
                        <div class="col-lg-12" >
                            <div id="indexes"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>


<script>

    Highcharts.chart('indexes', {
    chart: {
        type: 'column'
    },
    title: {
        text:'<a href="{{ url_for('index.reagent_labels', index_category_url=index_category.replace(' ', '_')) }}">{{index_category}}</a>: {{reagent_label}}'
    },
    subtitle: {
        text: 'Normalized index performance = (index_total_reads/index_target_reads)/(flowcell_total_reads/flowcell_target_reads).<br> Not showing data from runs with flowcell performance < {{flowcell_performance_treshold}}'},
    xAxis: {
        title: {text: 'Flowcells'},
        type: 'category',
        labels: {
            rotation: -70,
            style: {
                fontSize: '10px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Normalized index performance'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: 'Index fraction: <b>{point.y:.1f}</b>'
    },
    series: [{
        name: 'Population',
        data: {{results| tojson }}
    }]
});
</script>

{% endblock %}