{% from "base_macro.html" import header %}
{% block content %}
    {{ header("Mapping",
        '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }}

    <div class="container">
        <div>
            <h2>
                Whole Genome Mapping
            </h2>
            <form style ='float: left; padding: 5px;' id="exportform" action="export" method="post">
              <input type="hidden" id="data" name="data" value="">
              <input type="hidden" id="filename" name="filename" value="">
              <input type="submit" id="export" value="Download SVG">
            </form>
            <form style ='float: left; padding: 5px;' id="exportpdfform" action="export_pdf" method="post">
              <input type="hidden" id="data" name="data" value="">
              <input type="hidden" id="filename" name="filename" value="">
              <input type="submit" id="export_pdf" value="Download PDF">
            </form>
            <button id="return_to_full_view" class="btn" style="display:none">Return to full view</button>
        </div>
        <div id="chart_container">
            <div class="qtlcharts" id="topchart">
                
            </div>
        </div>
        <div style="width:60%;">
            <h2>
                Results
            </h2>
            <table id="qtl_results" class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th></th>
                        <th>Index</th>
                        <th>{{ score_type }}</th>
                        <th>Chr</th>
                        {% if mapping_scale == "centimorgan" %}
                        <th>cM</th>
                        {% else %}
                        <th>Mb</th>
                        {% endif %}
                        <th>Locus</th>
                   </tr>
                </thead>
                <tbody>
                    {% for marker in qtl_results %}
                        {% if (score_type == "LOD" and marker.lod_score > cutoff) or
                              (score_type == "LRS" and marker.lrs_value > cutoff) %}
                        <tr>
                            <td>
                                <input type="checkbox" name="selectCheck"
                                       class="checkbox edit_sample_checkbox"
                                       value="{{ marker.name }}" checked="checked">
                            </td>
                            <Td align="right">{{ loop.index }}</Td>
                            {% if score_type == "LOD" %}
                            <td>{{ '%0.2f' | format(marker.lod_score|float) }}</td>
                            {% else %}
                            <td>{{ '%0.2f' | format(marker.lrs_value|float) }}</td>
                            {% endif %}
                            <td>{{marker.chr}}</td>
                            <td>{{ '%0.6f' | format(marker.Mb|float) }}</td>
                            <td>
                                {{ marker.name }}
                                <!--<a href="{{ url_for('show_trait_page',
                                        trait_id = marker.name,
                                        dataset = dataset.name
                                        )}}">
                                    {{ marker.name }}
                                </a>-->
                            </td>
                        </tr>
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- End of body -->

{% endblock %}

{% block js %}  
    <script>
        js_data = {{ js_data | safe }}
    </script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready( function () {
            console.time("Creating table");
            $('#qtl_results').dataTable( {
                "columns": [
                    { "type": "natural", "bSortable": false },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" },
                    { "type": "natural" }
                    ],
                "buttons": [
                    'csv'
                ],
                "sDom": "RZBtir",
                "iDisplayLength": -1,
                "autoWidth": true,
                "bDeferRender": true,
                "bSortClasses": false,
                "scrollY": "700px",
                "scrollCollapse": true,
                "paging": false
            } );
            console.timeEnd("Creating table");

        });
    </script>
{% endblock %}