<!DOCTYPE html>
<html>
<head>
    {% load static %}
    {% load custom_tags %}
    {% include "chlamdb/header.html" %}
    <script type="text/javascript" src="{% static 'js/mark.min.js' %}"></script>
</head>

<body>
    <div class="container-fluid" id="main_container">
    <div class="row">
        <div id="wrapper">
            <div id="page-content-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    {% include "chlamdb/menu.html" %}

                    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                        <li class="active"><a href="#tab1" data-toggle="tab">Counts</a></li>
                        <li><a href="#tab2" data-toggle="tab">Annotation</a></li>
                        <li><a href="#tab66" data-toggle="tab" onclick="window.open('http://tcdb.org/search/result.php?tc={{family}}', 'orthoIDframe2'); return false">Informations</a></li>

                    </ul>

                    <div id="my-tab-content" class="tab-content">

                        <div class="tab-pane active" id="tab1">
                            <object type="image/svg+xml" data="{% static asset_path1 %}" id="asset_path1" style="width:80%"></object>
                        </div>

                        <div class="tab-pane" id="tab2">

                            <table class="table" id="table_tcdb">

                                <thead>
                                    <tr>
                                    <th>Locus</th>
                                        <th>Accession</th>
                                        <th>Start</th>
                                        <th>End</th>
                                    <th id="entete_locus">gene</th>
                                        <th>product</th>
                                    <th>present_n_genomes</th>
                                    <th>group</th>
                                    <th>length (aa)</th>
                                    <th>COG ID</th>
                                        <th>COG category</th>
                                        <th>COG description</th>
                                        <th>InterproScan</th>
                                    </tr>

                                </thead>
                                <tbody>
                                    {% for value in locus_annot %}
                                        <tr>

                                            <td><a href="{% url 'locusx' value.0 True%}">{{value.0}}</a></td>
                                            <td>{{value.1}}</td>
                                            <td>{{value.2|safe}}</td>
                                            <td>{{value.3|safe}}</td>
                                            <td>{{value.4|safe}}</td>
                                            <td>{{value.5|safe}}</td>
                                            <td>{{value.6|safe}}</td>
                                            <td>{{value.7|safe}}</td>
                                            <td>{{value.8|safe}}</td>
                                            <td>{{value.9|safe}}</td>
                                            <td>{{value.10|safe}}</td>
                                            <td>{{value.11|safe}}</td>

                                            {% with locus2interpro|keyvalue:value.0 as interpro_data %}
                                            <td>
                                                {% for one_interpro in interpro_data %}
                                                {% if one_interpro.0 != '-' %}
                                                    <a href="{% url 'fam' one_interpro.0 'interpro' %}" target="_top">{{one_interpro.0}}</a> /
                                                {%else%}
                                                    {{one_interpro.0}}
                                                {%endif%}
                                                    {{one_interpro.1}} </br>
                                                {% endfor %}
                                                {%endwith%}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</body>
{% include "chlamdb/style_menu.html" %}
<style>
#id_category{
    width:280px;
    text-align:left;
    left:600px;

}
</style>

<script>

$(document).ready(function() {
      $('#table_tcdb').DataTable( {
      dom: 'Bfrtip',
      "paging":   true,
      "ordering": true,
      "info":     false,
      buttons: [
        {
            extend: 'excel',
            title: 'table_tcdb'
        },
        {
            extend: 'csv',
            title: 'table_tcdb'
        }
      ],
      } );
      } );

</script>

</html>
