<!DOCTYPE html> <html>  <head> {% load custom_tags %}
  {% load static %}
  {% load static %}
  {% load crispy_forms_tags %}
  {% include "chlamdb/header.html" %}


   
</head>


<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="COG" active_tab="comp" %} 

          <br>
          <p class="page-title"><b>Compare the distribution of shared COG </b><a href="https://zdb.readthedocs.io/en/latest/tutorial/website.html#comparisons" id="show-option" target="_blank" title="Compare how many times the Pfam domains shared by the selected genomes (targets) have been identified."><i class="fab fa-info-circle " style="size: 5em;" ></i></a></p></center>

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

                      </form>

                      {% if envoi_comp %}
                      <div class="row" style="padding-top:30px ;background-color: rgba(245, 245, 245, 0.986); margin-top: 1em;" >
                  <h4>  Number of COG at least present 1 time in 1 of the {{taxon_list|length}} selected genomes: <strong>{{combined_df|length}}</strong>  </h4>
                         <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">
                              The ouput table contains the list of COG annotated in selected genomes and the number of times each of them was identified in each genome. 
                              <br>Click on COG accession to get detailed phylogenetic profile of the corresponding COG entry. 
                             </p>
                         </div>
                        </div>
                        <br>


                        <div class="col-lg-12">
                          <table class="hover" id="mytable"  style="padding-top: 10em;">
                                  <style>
                                    table {
                                        width:100%;
                                        table-layout:fixed;
                                    }
                                    
                                    </style>
                                     <thead>
                                      <tr >
                                      <th valign="bottom">COG accession</th>
                                      <th valign="bottom">Description</th>
                                      <th valign="bottom"># complete DB</th>
                                      <th valign="bottom"># genomes</th>
                                    {% for taxon in taxon_list %}
                                          <th>{{ taxon_id2description|keyvalue:taxon}}</div></th>
                                    {% endfor %}
                                  </tr>
                                </thead>
                                <tbody>
                                  {% for row in combined_df.iterrows %}
                                      <tr>
                                          {% for item in row.1 %}
                                                <td> {{item|safe}}</td>
                                          {% endfor %}
                                      </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: 'plast_refseq'
              },
              {
                  extend: 'csv',
                  title: 'plast_refseq'
              }
          ],
         
          "ordering": true,
          "info":     false,
          } );
      } );
      
      $(document).ready(function() {
      $("#mytable").DataTable();} );
      
      </script>

</body>
</html>
