{% extends "base.html" %}

{% block content %}
  <div class="row">
    <div class="col-lg-6">
      <h3>Sequence Length Statistics</h3>
      <p>
        <a class="btn btn-default" href="descriptive_stats.tsv" target="_blank" rel="noopener noreferrer">
          Download sequence-length statistics as a TSV
        </a>
      </p>
      <table class="table table-striped" id="stats_table">
        <thead>
          <tr>
            <th>Sequence Count</th>
            <th>Min Length</th>
            <th>Max Length</th>
            <th>Mean Length</th>
            <th>Range</th>
            <th>Standard Deviation</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{ stats.count }}</td>
            <td>{{ stats.min | int }}</td>
            <td>{{ stats.max | int }}</td>
            <td>{{ stats.mean | round(2, 'common') }}</td>
            <td>{{ stats.range | int }}</td>
            <td>{{ stats.std | round(2, 'common') }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-lg-6">
      <h3>Seven-Number Summary of Sequence Lengths</h3>
      <p>
        <a class="btn btn-default" href="seven_number_summary.tsv" target="_blank" rel="noopener noreferrer">
          Download seven-number summary as a TSV
        </a>
      </p>
      <table class="table table-striped" id="summary_table">
        <thead>
          <tr>
            <th>Percentile:</th>
            {% for percentile in stats.seven_num_summ_percentiles %}
            <th>{{ (percentile*100) | int }}%</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          <tr>
          <td>Length* (nts):</td>
          {% for value in stats.seven_num_summ_values %}
            <td>{{ value | int }}</td>
          {% endfor %}
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-6">
    </div>
    <div class="col-lg-6">
      <p>
        *Values rounded down to nearest whole number.
      </p>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12">
      <h3>Sequence Table</h3>
      <p>
        To BLAST a sequence against the NCBI nt database, click the
        sequence and then click the <i>View report</i>
        button on the resulting page.
      <p>
        <a class="btn btn-default" href="sequences.fasta" target="_blank" rel="noopener noreferrer">
          Download your sequences as a raw FASTA file
        </a>
      </p>
      <p>
        <i>Click on a Column header to sort the table.</i>
      </p>
      <table class="table table-striped table-hover" id="seq_table">
        <thead>
          <tr>
            <th>Feature ID</th>
            <th data-tsorter="numeric">Sequence Length</th>
            <th data-tsorter="link">Sequence</th>
          </tr>
        </thead>
        <tbody>
        {% for sequence in data %}
          <tr>
            <td>{{ sequence.id }}</td>
            <td>{{ sequence.len }}</td>
            <td><samp><a target="_blank" href="{{ sequence.url }}" rel="noopener noreferrer">{{ sequence.seq }}</a></samp></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  <script src="./js/tsorter.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function init() {
      var sorter = tsorter.create('seq_table');
    }

    window.onload = init;
  </script>
  <style media="screen">
    #seq_table th.descend:after{
      content: "\25B2";
    }
    #seq_table th.ascend:after{
      content: "\25BC";
    }
  </style>
{% endblock %}