<!DOCTYPE html>

<html>

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

          {% if show_comparison_table %}
            <div class="row">
              <div class="col-lg-12">

                <div class="row" style="padding-top:10px ;background-color: rgba(245, 245, 245, 0.986); margin-top: 1em;" >
                  <h4>{{table_title|safe}}</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">
                      {{table_help|safe}}
                    </p>
                  </div>
                </div>
                <br>
                <div class="col-lg-12">
                  <table class="hover table" id="mytable"  style="padding-top: 1em;">
                    <thead>
                      <tr>
                        {% for title in table_headers %}
                          <th>{{title}}</th>
                        {% endfor %}
                      </tr>
                    </thead>
                    <tbody>
                      {% for row in table_rows %}
                        <tr>
                          {% for value in row|slice_up_to:n_data_columns %}
                            {% if forloop.counter0 < first_coloured_row %}
                              <td>{{value|safe}}</td>
                            {% else %}
                              {% with color_i=forloop.counter0|add:hist_colour_index_shift %}
                                {% with colour=row|return_item:color_i %}
                                  {% if colour != 0 %}
                                    <td data-hist="{{colour}}">{{value}}</td>
                                  {% else %}
                                    <td>{{value}}</td>
                                  {% endif %}
                                {% endwith %}
                              {% endwith %}
                            {% endif %}
                          {% endfor %}
                        </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</body>

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

<script>
  $(function(){
    $("#mytable td").hottie({
      readValue : function(e) {
        return $(e).attr("data-hist");
      },
      colorArray : [
        "#5858FA",
        "#FBEFEF",
        "#FA5858"
      ]
    });
  });

  $(document).ready(function() {
    let buttons = [
          {
              extend: 'colvis',
              columns: ':not(.noVis)',
          },
          {
              extend: 'excel',
              title: 'plast_refseq'
          },
          {
              extend: 'csv',
              title: 'plast_refseq'
          }
      ]
    var show_custom_plot_button = {{custom_plot_button|safe}};
    if (show_custom_plot_button) {
      buttons.push({
        text: 'Plot phylogeny',
        action: function(e, dt, node, config) {
          makeCustomPlot(dt);
        },
      })
    }
    $('#mytable').DataTable( {
      select: {
          items: 'row',
          style: 'os',
          headerCheckbox: true,
      },
      columnDefs: [
          {
              orderable: false,
              render: DataTable.render.select(),
              target: 0
          }
      ],
      dom: 'lBfrtip',
      buttons: buttons,

      "ordering": true,
      "info":     false,
      } );
  } );

</script>
</html>
