<!DOCTYPE html>


<html>



<head>
    {% load static %}
    {% load custom_tags %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    <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/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/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_cytoscape.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' %}" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/4.10.3/css/bootstrap-slider.min.css">

    <script type="text/javascript" src="{% static 'js/cytoscape-cola.js' %}"></script>

</head>

<body height="2000px">

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

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

    <div id="content">

        <h3>Clusters of conserved genes</h3>

            <form action="{% url "locus2locus" %}" method="post">{% csrf_token %}

            <table>
            <tr>
              <td>{{ form.as_p }}</td>
            </tr>

            <tr>
              <td><input type="submit" name="submit_circos" value="get network" id="id_submit_circos" /></td>
            </tr>
            </table>


            <ul style="padding-top: 10px" id="tabs" class="nav nav-tabs" data-tabs="tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Corresp</a></li>
            </ul>

            <div id="my-tab-content" class="tab-content" style="height: 4000px;">
            <div class="row">
                <div class="col-xs-6" style="padding-left: 15px">
                    <table>
                   {% for orthogroup, locus_list in orthogroup2locus_list_corresp.items %}
                        {% for locus in locus_list%}
                            <tr>
                                <td>{{orthogroup}}</td>
                                <td>
                                    {% with orthogroup2locus_list|keyvalue:orthogroup as ref_locus_list %}
                                    {{ ref_locus_list|join:" // " }}
                                    {%endwith%}
                                </td>
                                <td>{{locus}}</td>
                            </tr>
                        {% endfor %}
                    {% endfor%}
                    </table>
                </div>
            </div>
            </div>
    </div>
</div>
</body>

</html>
