<!DOCTYPE html>


<html>



<head>
    {% load static %}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    {% load custom_tags %}
    {% include "chlamdb/header.html" %}
</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" %}
                 {% include "chlamdb/extract_nav_tabs_template.html" with type="orthology" active_tab="comp" %}

                  <br>
                  <p class="page-title"><b>Size of shared Orthologous groups </b><a href="https://zdb.readthedocs.io/en/latest/tutorial/website.html#comparisons" id="show-option"  target="_blank" title="Compare the size of the orthogroup shared by selected genomes (targets)"><i class="fab fa-info-circle " style="size: 5em;" ></i></a></p></center>

                      <form action='{% url "orthogroup_comparison"  %}' method="post">
                          {% csrf_token %}
                          {{ form.as_p }}
                          <input type="submit" value="Submit" />

                      </form>

                      {% if envoi_comp %}
                    </div>
                      <div class="row" style="padding-top:30px ;background-color: rgba(245, 245, 245, 0.986); margin-top: 2em;" >
                        
                         <div class="panel panel-success"  style="margin:1em;">
                             <div class="panel-heading" style="width:100%">
                                 <h5 class="panel-title">Help to interpret the results</h5>
                             </div>
                             <p style="margin: 10px 10px 10px 10px">
                              Number of shared orthogroups exhibiting 1 or more copies (in one ore multiple genomes) in at least 1 out of x selected genomes: {{n_orthogroups}}
                              <br> 
                              <br> The ouput table contains the number of homologs in the shared orthogroups of the selected genomes. Interesting for comparing the size of orthogroups within genomes.
                                <br> Homolog counts can be reordrered by clicking on column headers.<br>
                                <br>Click on Orthologous group to get all the homologs identified in the database and the phylogenetic profile. 
                             </p>
                         </div>
                     <br>
                      <div class="col-lg-12">
                     <table class="hover" id="mytable"  style="padding-top: 10em;">
                      <style>
                      table {
                        table-layout: fixed;
                      } </style>

                                  <thead>


                                    <tr>
                                        <th>Orthogroup</th>
                                        {% for genome in genomes_list %}
                                            <th>{{genome}}</th>
                                        {% endfor %}
                                        <th>Annotation</th>
                                    </tr>
                                  </thead>
                                  <tbody>
                                  {% for items in og_data %}
                                      <tr> <td><a href="{% url 'orthogroup'  items.0 %}">{{items.0}}</a></td>
                                          {% for count in items.1%}
                                                {%if count != 0 %}
                                                <td data-hist="{{count}}">{{count}}</td>
                                                {% else %}
                                                 <td>{{count}}</td>
                                                {% endif %}
                                          {% endfor %}
                                          <td>
										  {{items.2|safe}}
                                          </td>
                                      </tr>
                              {% endfor %}
                              </tbody>
                              </table>



                      {% endif %}
              </div>
          </div>
        </div>
      </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>


<script>

$(document).ready(function() {
  $('#mytable').DataTable( {
    dom: 'lBfrtip',
    buttons: [
        {
            extend: 'colvis',
            columns: ':not(.noVis)',
        },
        {
            extend: 'excel',
            title: 'orth_comp'
        },
        {
            extend: 'csv',
            title: 'orth_comp'
        }
    ],
   
    "ordering": true,
    "info":     false,
    } );
} );

$(document).ready(function() {
$("#mytable").DataTable();} );

</script>
</html>
