<!DOCTYPE html>


<html>



<head>
    {% load static %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}

    <script type="text/javascript" src="{% static 'js/tableExport.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.base64.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.tablesorter.js' %}"></script>
    <!--<script type="text/javascript" src="{% static 'js/jquery-1.11.2.min.js' %}"></script>-->
    <script type="text/javascript" src="{% static 'js/sorttable.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/excellentexport.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.chained.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>

    <script type="text/javascript" src="{% static 'js/jvenn.min.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="{% static 'js/bootstrap-switch.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'css/toggle-switch.css' %}" />

</head>

<body height="2000px">

    <div id="container">
        <div id="content">
            <div id="sidebar">
                {% include "chlamdb/menu.html" %}
            </div>
            <div id="header">
                {% include "chlamdb/user.html" %}
            </div>

            <h3>RNAseq temporal class {{temporal_class}}</h3>
            {{data|length}}

            <!--|0 seqfeature_id |1 old_locus_tag |2 operon_id |3 gene_name |4 temporal_class |5 EB_proteome |6 function_conspred
            |7 eggNOG |8 comment |9 hpi_2_1 |10 hpi_2_2 |11 hpi_2_3 |12 hpi_48_1 |13 hpi_48_2 |14 hpi_48_3 |15 hpi_96_1 |16 hpi_96_2
            |17 hpi_96_3 |18 extracellular_1 |19 extracellular_2 |20 extracellular_3 |-->

                           <div>
                               <table style="width:100%" class="sortable" id="mytable">
                                   <tr>
                                       <th style="width:100px">Old locus</th>
                                       <th style="width:200px">locus</th>
                                       <th style="width:150px">Gene name</th>
                                       <th style="width:30px">EB</th>
                                       <th style="width:350px">Product</th>
                                       <th style="width:350px">eggNOG</th>
                                       <th style="width:350px">comment</th>
                                       <th style="width:50px">hpi_2_1</th>
                                       <th style="width:50px">hpi_2_2</th>
                                       <th style="width:50px">hpi_2_3</th>
                                       <th style="width:50px">hpi_48_1</th>
                                       <th style="width:50px">hpi_48_2</th>
                                       <th style="width:50px">hpi_48_3</th>
                                        <th style="width:50px">hpi_96_1</th>
                                       <th style="width:50px">hpi_96_2</th>
                                       <th style="width:50px">hpi_96_3</th>
                                       <th style="width:50px">extracellular_1</th>
                                       <th style="width:50px">extracellular_2</th>
                                       <th style="width:50px">extracellular_3</th>

                                   </tr>

                                   {% for row in data%}
                                   <tr>
                                       <td>{{row.1}}</td>
                                       {% if row.21 == None %}
                                          <td>{{row.21}}</td>
                                       {% else %}
                                          <td><a href="{% url 'locusx' row.21 True %}" target="_top">{{row.21}}</a></td>
                                       {%endif%}
                                       <td>{{row.3}}</td>
                                       <td>{{row.5}}</td>
                                       <td>{{row.6}}</td>
                                       <td>{{row.7}}</td>
                                       <td>{{row.8}}</td>
                                       <td data-hist="{{row.9}}">{{row.9}}</td>
                                       <td data-hist="{{row.10}}">{{row.10}}</td>
                                       <td data-hist="{{row.11}}">{{row.11}}</td>
                                       <td data-hist="{{row.12}}">{{row.12}}</td>
                                       <td data-hist="{{row.13}}">{{row.13}}</td>
                                       <td data-hist="{{row.14}}">{{row.14}}</td>
                                       <td data-hist="{{row.15}}">{{row.15}}</td>
                                       <td data-hist="{{row.16}}">{{row.16}}</td>
                                       <td data-hist="{{row.17}}">{{row.17}}</td>
                                       <td data-hist="{{row.18}}">{{row.18}}</td>
                                       <td data-hist="{{row.19}}">{{row.19}}</td>
                                       <td data-hist="{{row.20}}">{{row.20}}</td>

                                   </tr>
                                   {% endfor %}
                               </table>
                           </div>
        </div>
    </div>
</body>
<script src="{% static 'js/jquery.hottie.js' %}"></script>
                        <script>
                        $(function(){
                        $("#mytable td").hottie({
                        readValue : function(e) {
                        return $(e).attr("data-hist");
                        },
                        colorArray : [
                        "#5858FA",
                        "#FBEFEF",
                        "#FA5858"
                        ]

                        });

                        });
                        </script>
</html>
