{% extends "tabbed.html" %} {% block head %}
<script src="util.js"></script> {% endblock %}
{% block tabcontent %}
<div class="row">
  <div class="col-lg-12">
    <h1>Table summary</h1>

    <div class="row">
      <div class="col-lg-6">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Summary Statistic</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Number of samples</th>
              <td id="number-of-samples"></td>
            </tr>
            <tr>
              <th scope="row">Number of features</th>
              <td id="number-of-features"></td>
            </tr>
            <tr>
              <th scope="row">Total frequency</th>
              <td id="total-frequency"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <h1>Frequency per sample</h1>

    <div class="row">
      <div class="col-lg-6">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th></th>
              <th>Frequency</th>
            </tr>
          </thead>
          <tbody id="sample-table-body"></tbody>
        </table>
      </div>
      {% if number_of_samples > 1 %}
      <div class="col-lg-6">
        <p class="text-center">
            <a href="sample-frequencies.pdf">
                <img src="sample-frequencies.png" width="700" height="500" class="center-block">
                <br>
                <p class="text-center">Download as PDF</p>
            </a>
        </p>
      </div>
      {% endif %}
    </div>

    <h1>Frequency per feature</h1>

    <div class="row">
      <div class="col-lg-6">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th></th>
              <th>Frequency</th>
            </tr>
          </thead>
          <tbody id="feature-table-body"></tbody>
        </table>
      </div>
      {% if number_of_features > 1 %}
      <div class="col-lg-6">
        <p class="text-center">
            <a href="feature-frequencies.pdf">
                <img src="feature-frequencies.png" width="700" height="500" class="center-block">
                <br>
                <p class="text-center">Download as PDF</p>
            </a>
        </p>
      </div>
      {% endif %}
    </div>
  </div>
</div>

<script id="sample-table-data" type="application/json">
{{ sample_summary_table }}
</script>

<script id="feature-table-data" type="application/json">
{{ feature_summary_table }}
</script>

<script type="text/javascript">
  const numberOfSamples = document.getElementById("number-of-samples");
  numberOfSamples.innerText = formatter.format({{number_of_samples}});

  const numberOfFeatures = document.getElementById("number-of-features");
  numberOfFeatures.innerText = formatter.format({{number_of_features}});

  const totalFrequency = document.getElementById("total-frequency");
  totalFrequency.innerText = formatter.format({{total_frequencies}});

  const sampleTableBody = document.getElementById("sample-table-body");
  const sampleTableData = JSON.parse(document.getElementById("sample-table-data").innerHTML);

  formatTable(sampleTableBody, sampleTableData, Object.keys(sampleTableData["Frequency"]).reverse());

  const featureTableBody = document.getElementById("feature-table-body");
  const featureTableData = JSON.parse(document.getElementById("feature-table-data").innerHTML);

  formatTable(featureTableBody, featureTableData, Object.keys(featureTableData["Frequency"]).reverse());
</script>

{% endblock %}
