<!DOCTYPE html>
<html>
<head> 
  {% load static %}
  {% 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">
          {% include "chlamdb/comparison_header.html" %}

          {% if show_results %}

            <div class="row" style="background-color: rgba(245, 245, 245, 0.986)">
              <div class="col-lg-12">
                <br>
                <div class="panel panel-success" style="width:60%; top: 200px; margin: 10px 10px 10px 10px; float: left;">
                  <div class="panel-heading" style="width:100%">
                    <h3 class="panel-title">Help to interpret the results</h3>
                  </div>
                  <p style="margin: 10px 10px 10px 10px; line-height: 180%">{{ table_help|safe }}</p>
                </div>
                <div style="padding-top:10px">
                  <table class="table" style="width:600px">
                    <tr>
                      <th>Number of included genomes</th>
                      <td> {{ included_taxids|length }} </td>
                    </tr>
                    <tr>
                      <th>Number of excluded genomes</th>
                      <td> {{ excluded_taxids|length }} </td>
                    </tr>

                    <tr>
                      <th>Number of accepted missing data</th>
                      <td> {{ n_missing }} </td>
                    </tr>
                    <tr>
                      <th>Number of {{ object_name_plural }} identified</th>
                      <td> {{ n_hits }}  </td>
                    </tr>
                  </table>

                  {% if show_circos_form %}
                    <div class="box" style="width:30%; top: 200px; padding: 10px 10px 10px 10px;">

                      <form action="/circos_main/" method="POST" id="carform" >
                        <h5><b>Show the comparison on circular map</b></h5>
                        {% csrf_token %}
                        <input type="hidden" name="exclude_taxids" value="{{excluded_taxids}}">
                        <input type="hidden" name="include_taxids" value="{{included_taxids}}">
                        <input type="hidden" name="og_list" value="{{selection}}">
                        <select name="reference_taxid" id="reference_taxid" class="bootstrap-select" style="height:36px; margin-bottom: 1em;">
                          {% for row in ref_genomes.itertuples %}
                            <option value="{{row.taxon_id}}">{{row.description}}</option>
                          {% endfor %}
                        </select>
                        <br>
                        <button type="submit">Show</button>
                      </form>

                    </div>
                  {% endif %}
                </div>
              </div>
              {% include "chlamdb/result_tabs.html" %}
            </div>
          {% endif %}

        </div> <!-- page-content-wrapper -->
      </div> <!-- wrapper -->
    </div>  <!-- row -->
  </div>  <!-- container-fluid -->

<script src="{% static 'js/cookie.js' %}"></script>
<script src="{% static 'js/jquery.redirect.js' %}"></script>
<script type="text/javascript" src="{% static 'js/custom_plot.js' %}"></script>

<script>

  $(document).ready(function() {
    $('.data-table').DataTable({
    select: {
        items: 'row',
        style: 'os',
        headerCheckbox: true,
    },
    columnDefs: [
        {
            orderable: false,
            render: DataTable.render.select(),
            target: 0
        }
    ],
    dom: 'Bfrtip',
    "paging":   true,
    "ordering": true,
    "info":     false,
    buttons: [
      {extend: 'excel', title: 'ko_table'},
      {extend: 'csv', title: 'ko_table'},
      {
        text: 'Plot phylogeny',
        action: function(e, dt, node, config) {
          makeCustomPlot(dt);
        },
      }
    ]});
  } );



</script>


{% include "chlamdb/style_menu.html" %}
</body>
</html>

<style>
option:first {
    color: #999;
}
</style>
