{% extends 'base.html' %}

{% block head %}
  <script src='dist/vendor.bundle.js'></script>
{% endblock %}

{% block content %}
  {% if non_categorical_columns %}
  <div class="row">
    <p class="alert alert-warning col-md-12">
      The following metadata columns have been omitted because they didn't
      contain categorical data:
      <strong>{{ non_categorical_columns }}</strong>
    </p>
  </div>
  {% endif %}
  {% if filtered_columns %}
  <div class="row">
    <p class="alert alert-warning col-md-12">
      The following categorical metadata columns have been omitted because the
      number of groups was equal to the number of samples, there was only a
      single group, or the column consisted only of missing data:
      <strong>{{ filtered_columns }}</strong>
    </p>
  </div>
  {% endif %}
  {% if filtered_group_comparisons %}
  <div class="row">
    <p class="alert alert-warning col-md-12">
      The following pairwise group comparisons have been omitted because the
      Kruskal-Wallis test could not be completed. This can occur if the two
      groups being compared each have a sample size (n) of 1 and contain
      the same single value.
      </thead>
      <strong>{{ filtered_group_comparisons }}</strong>
    </p>
  </div>
  {% endif %}
  <div class="row">
    <p class="alert alert-warning col-md-12" id="filtered-samples"></p>
  </div>
</div>

<div class="container-fluid" id="main">
  <div class="row">
    <div class="col-lg-12">
      <a href="metadata.tsv" target="_blank" rel="noopener noreferrer">
        Download raw data as TSV
      </a>
    </div>
  </div>

  <hr>

  <h2>Kruskal-Wallis (all groups)</h2>
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th></th>
        <th>Result</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">H</th>
        <td id="kw-all-h"></td>
      </tr>
      <tr>
        <th scope="row">p-value</th>
        <td id="kw-all-p"></td>
      </tr>
    </tbody>
  </table>

  <hr>

  <h2>Kruskal-Wallis (pairwise)</h2>
  <a id="kw-csv">Download CSV</a>
  <div id="kw-pairwise"></d>
</div>
<script>
  var d = [];
  function load_data(columnName, data, filtered, kwAll, kwPairwise, kwCSVPath, metricName) {
    d.push({
      column: columnName,
      data: data,
      kwAll: kwAll,
      kwPairwise: kwPairwise,
      filtered: filtered,
      kwCSVPath: kwCSVPath,
      metricName: metricName,
    });
  }
</script>
{% for column in columns %}
<script src='{{ column }}?callback=load_data'></script>
{% endfor %}
<script src='dist/bundle.js'></script>
{% endblock %}
