{% extends "tabbed.html" %}

{% block head %}
<script src="js/bootstrapMagic.js" type="text/javascript"></script>
<link href="css/styles.css" rel="stylesheet" />
<script type="text/javascript">
  // temporary hack to make it look good with Bootstrap 5
  removeBS3refs();
</script>

<!--To rebuild or modify those links with the latest versions of the included software please visit:-->
<!--https://datatables.net/download/#bs/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/sc-1.4.2-->
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs=" rel="stylesheet"/>
<link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.0.2/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/fc-5.0.0/fh-4.0.1/sc-2.4.1/datatables.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.0.2/b-3.0.1/b-colvis-3.0.1/b-html5-3.0.1/b-print-3.0.1/cr-2.0.0/fc-5.0.0/fh-4.0.1/sc-2.4.1/datatables.min.js"></script>
{% endblock %}

{% block tabcontent %}
  <div class="row">
    <div class="col-lg-12" style="margin: 5px">
      <div style="align-items: center; display: flex; margin-top: 5px">
        <span class="header-inline">Downloads:</span>
        <a href="busco_results.csv" target="_blank" rel="noopener noreferrer" class="btn btn-outline-secondary">
          BUSCO results (csv)
        </a>
      </div>
      <p style="margin-top: 10px">
        This file won't necessarily reflect dynamic sorting or filtering
        options based on the interactive table below.
      </p>
      <div style="overflow-x:auto;">
        <table id="table" class="table table-hover table-striped table-bordered"></table>
      </div>
      <div id="loading" class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
      </div>
    </div>
  </div>

  <script id="data" type="application/json">{{ table }}</script>
  <script type="text/javascript">
    $(document).ready(function(){
      adjustTagsToBS3()

      const data = JSON.parse(document.getElementById('data').innerHTML);

      // Construct initial table header
      var table = $('#table'), head = $('<thead></thead>'), row = $('<tr></tr>');
      table.append(head), head.append(row);
      $.each(data.columns, function(i, val) {
        row.append(function() {
          return '<th>' + val + '<br></th>';
        });
      });

      table
        .on('init.dt', function() {
          loading.remove();
          console.log('Successfully loaded table!');
        })
        .on('error.dt', function(error, settings, techNote, message) {
          // From 'js-error-handler.html'
          handleErrors([error, settings, techNote, message], loading, helpMsg);
        })
        .DataTable({
          data: data.data,
          fixedHeader: true,
          pageLength: {{ page_size }},
          dom: 'frtip',
        });
    });
  </script>
{% endblock %}

{% block footer %}
{% set loading_selector = '#loading' %}
{% include 'js-error-handler.html' %}
{% endblock %}