{% extends "tabbed.html" %}

{% 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>Metric</th>
              <th>Sample</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">Number of samples</th>
              <td>{{ "{:,}".format(number_of_samples) }}</td>
            </tr>
            <tr>
              <th scope="row">Number of features</th>
              <td>{{ "{:,}".format(number_of_features) }}</td>
            </tr>
            <tr>
              <th scope="row">Total frequency</th>
              <td>{{ "{:,}".format(total_frequencies) }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <h1>Frequency per sample</h1>

    <div class="row">
      <div class="col-lg-6">
        {{ sample_summary_table }}
        <p class="text-left">
          Frequency per sample detail (<a href="sample-frequency-detail.csv">csv</a> |
          <a href="sample-frequency-detail.html">html</a>)
        </p>
      </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>

    <div class="row">
      <div class="col-lg-6">
        <h1>Frequency per feature</h1>
        {{ feature_summary_table }}
        <p class="text-left">
          Frequency per feature detail (<a href="feature-frequency-detail.csv">csv</a> |
          <a href="feature-frequency-detail.html">html</a>)
        </p>
      </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>
{% endblock %}