<!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>
    {% if not no_tree %}
    <div id="pfam_tree_div">
        <object type="image/svg+xml" data="{% static asset_path %}" id="pfam_tree"></object>
    </div>
    <div  id="pfam_table_div">
        <h3>Orthogroups:</h3>

            <table class="sortable" id="table_groups">

                <thead>
                    <tr>
                    <th></th>
                    <th id="entete_locus">Orthogroup</th>
                    <th>Genes</th>
                    <th>Products</th>
                    <th>Cogs</th>
                    <th>Pfam</th>
                    </tr>
                </thead>

                {% for value in match_groups_data %}
                    <tr>
                        <td>{{value.0}}</td>
                        <td><a href="{% url 'locusx' value.1 True%}" target="_top">{{value.1}}</a></td>
                        <td>{{value.2|safe}}</td>
                        <td>{{value.3|safe}}</td>
                        <td>{{value.4|safe}}</td>
                        <td>{{value.5|safe}}</td>

                    </tr>
                {% endfor %}
            </table>


    </div>
    {% else %}
    No tree for {{orthogroup}}
    {% endif %}
</body>
</html>
