{% extends 'tabbed.html' %}

{% block head %}
<title>Contig QC Dashboard (Vega-Lite)</title>
<script src="js/bootstrapMagic.js" type="text/javascript"></script>
<link href="css/styles.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/2.3.0/css/dataTables.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/2.3.0/js/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" style="margin-right: 5px">Downloads:</span>
      <a href="data/sample_metrics.tsv" target="_blank" rel="noopener noreferrer" class="btn btn-outline-secondary">
        Sample metrics (tsv)
      </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">{{ sample_metrics | safe }}</script>
<script type="text/javascript">
  $(document).ready(function(){
    removeBS3refs();
    adjustTagsToBS3();

    const data = JSON.parse(document.getElementById('data').innerHTML);
    const nameMapping = {
      sample: "Sample",
      count: "Contig count",
      mean: "Average contig [bp]",
      longest: "Longest contig [bp]",
      n50: "N50",
      n90: "N90",
      l50: "L50",
      l90: "L90",
      total_length: "Total assembly length [bp]",
    };

    new DataTable("#table", {
      data: data,
      columns: [
        { data: 'sample', title: nameMapping.sample },
        { data: 'count', title: nameMapping.count },
        { data: 'mean', title: nameMapping.mean },
        { data: 'longest', title: nameMapping.longest },
        { data: 'n50', title: nameMapping.n50 },
        { data: 'n90', title: nameMapping.n90 },
        { data: 'l50', title: nameMapping.l50 },
        { data: 'l90', title: nameMapping.l90 },
        { data: 'total_length', title: nameMapping.total_length }
    ],
      fixedHeader: true,
      pageLength: {{ page_size }},
    })

    document.getElementById('loading').remove();

  });
</script>

<script>
  // --- Data injected from Python ---
  const categories = {{ categories | safe }};
</script>
{% endblock %}

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