<!DOCTYPE html>


<html>


<head>
{% load static %}
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
{% include "chlamdb/header.html" %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />

</head>

<body id="locus_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" %}
                  <form action='{% url "locus_int" %}' method="post">
                      {% csrf_token %}
                          {{ form.as_p }}
                              <div class="form-inline">
                                  <div class="form-group">
                                       <div class="col-md-11" style="width: 100%;left:120px;">
                                           <p>
                                            <label style="width:380px;text-align:left;" >
                                                <input type="radio" id="show_identity" value="noshow" name="show_id" checked>
                                                Show coloured heatmap
                                            </label>

                                            <label style="width:380px;text-align:left;">
                                                <input id="show_identity" value="show" name="show_id" type="radio">
                                                Show identity values
                                            </label>
                                           </p>
                                      </div>
                                  </div>
                              </div>




                              <input style="width:80px;text-align:left;top:100px;position:absolute;" type="submit" name="comparison" value="Submit" id="extract_button" />


                  </form>


                  {% if envoi %}

                  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
                      <li class="active"><a href="#tab1" data-toggle="tab">Orthogroup profile</a></li>
                      <li><a href="#tab2" data-toggle="tab">Identity closest</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_path %}" id="inter_tree"></object>
                          <table class="sortable" id="mytable">
                             <tr>
                                  <th>Date</th>
                                  <th>Orthogroup</th>
                                  <th>Category</th>
                                  <th>Gene</th>
                                  <th>Locus</th>
                                  <th>Description</th>
                                  <th>Ref</th>
                              <tr>
                              {% for values in data%}
                                  <tr>
                                      <td>{{values.5}}</td>
                                      <td>{{values.6}}</td>
                                      <td>{{values.0}}</td>
                                      <td>{{values.1}}</td>
                                      <td>{{values.2}}</td>
                                      <td>{{values.3}}</td>
                                      <td>{{values.4}}</td>
                                  </tr>

                              {% endfor %}
                          </table>
                      </div>
                      <div class="tab-pane" id="tab2">
                          <img src='{%static scale_path%}' id="circos_legend"  width="160" style="position: absolute; top: 170px; left: 600px;">

                          <object type="image/svg+xml" data="{% static asset_path2 %}" id="inter_tree" style="position: relative; top: 10px; left: 10px;"></object>
                          <table class="sortable" id="mytable">
                             <tr>
                                  <th id="entete_meta" >Orthogroup</th>
                                  <th id="entete_meta3">Category</th>
                                  <th id="entete_meta3">Gene</th>
                              <th id="entete_meta3">Locus</th>
                              <th id="entete_meta3">Description</th>

                              <tr>
                              {% for values in data%}
                                  <tr>
                                      <td>{{values.5}}</td>
                                      <td>{{values.1}}</td>
                                      <td>{{values.2}}</td>
                                      <td>{{values.3}}</td>
                                      <td>{{values.4}}</td>
                                      <td>{{values.5}}</td>
                                  </tr>

                              {% endfor %}
                          </table>
                      </div>
                  </div>
                  {% endif %}
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
{% include "chlamdb/style_menu.html" %}
<style>
#id_category{
    width:280px;
    text-align:left;
    left:600px;

}


</style>

</html>
