{% load static %}
{% load custom_tags %}

<div style="{{results.data_table_config.style}}" >
  <table id="{{results.data_table_config.table_id}}" class="table table-striped" width="100%" >
    <thead>
      <tr>
        {% if results.data_table_config.selectable%}
          <th></th>
        {% endif %}
        {% if results.data_table_config.display_index%}
          <th></th>
        {% endif %}
        {% for header in results.table_headers %}
          <th>{{ header|safe }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for index, row in results.table_data.iterrows %}
        <tr>
          {% if results.data_table_config.selectable%}
            <td>{{index}}</td>
          {% endif %}
          {% if results.data_table_config.display_index%}
            <td>{{forloop.counter}}</td>
          {% endif %}
          {% for attrname in results.table_data_accessors%}
            <td>{{row|attrvalue:attrname|safe}}</td>
          {% endfor %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

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

<script>
$(document).ready(function() {
  var table_config = {{results.data_table_config.to_json|safe}};
  if (table_config.custom_plot_button) {
    table_config["buttons"].push({
      text: 'Plot phylogeny',
      action: function(e, dt, node, config) {
        makeCustomPlot(dt);
      },
    })
  }
  if (table_config.display_as_datatable) {
    $('table#{{results.data_table_config.table_id}}').DataTable( table_config );
  }
} );

</script>
