{% extends "base.html" %}
{% block content %}
  <div class="section">
    <div class="toc card">
      <h3>Table of contents</h3>
      <ol>
        <li><a href="#summary">Report Summary</a></li>
        <li><a href="#n-blocks">Alignment N-content</a></li>
        <li><a href="#reported">Flagged sites</a></li>
        <li><a href="#flagged">Location of flagged sites</a></li>
        <li><a href="#sequence-removals">Flagged sequences</a></li>
        <li><a href="#diversity">Diversity</a></li>
      </ol>
    </div>

    <div id="summary" class="card">
      <h3>1. Report Summary</h3>
      <p>Sequences: {{ summary.sequences }}<br>
        Alignment length: {{ summary.alignment_length }}</p>
      <p>Mean N content: {{ summary.mean_n_content }}<br>
        Mean completeness: {{ summary.mean_completeness }}</p>
    </div>

    <div id="n-blocks" class="card">
      <h3>2. Alignment N-content</h3>
      {% if n_blocks_plot_html %}
        <p class="caption">
          Purple blocks represent N positions (ambiguous nucleotides) along the alignment for each sequence. <br>
          {% if n_blocks_plot_note %}
            {{ n_blocks_plot_note }}
          {% endif %}
        </p>

        {{ n_blocks_plot_html | safe }}

      {% else %}
        <p>No alignment data available for plotting.</p>
      {% endif %}
      
    </div>
    <div id="reported" class="card">
      <h3>3. Flagged sites</h3>
      <p>Categories of mutations checked were {{ flagged_criteria }}.</p>
      {% if sites_table %}
        <div class="table-wrap table-scroll">
          <table class="datatable">
            <thead>
              <tr>
                {% for header in sites_table.headers %}
                  <th>{{ header }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in sites_table.rows %}
                <tr>
                  {% for cell in row %}
                    <td>{{ cell }}</td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p>No sites flagged for review.</p>
      {% endif %}
    </div>
    <div id="flagged" class="card">
      <h3>4. Location of flagged sites</h3>
      <p>Categories of mutations checked were {{ flagged_criteria }}.</p>
      {% if flagged_plot_html %}
        {{ flagged_plot_html | safe }}
      {% else %}
        <p>No sites flagged for review.</p>
      {% endif %}
    </div>

    <div id="sequence-removals" class="card">
      <h3>5. Flagged sequences</h3>
      <p>Sequences are flagged for removal if they meet the following criteria: {{ flagged_removal_criteria }}.</p>
      {% if sequence_removals_table %}
        <div class="table-wrap table-scroll">
          <table class="datatable">
            <thead>
              <tr>
                {% for header in sequence_removals_table.headers %}
                  <th>{{ header }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in sequence_removals_table.rows %}
                <tr>
                  {% for cell in row %}
                    <td>{{ cell }}</td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p>No sequences flagged for removal.</p>
      {% endif %}
    </div>

    <div id="diversity" class="card">
      <h3>6. Diversity</h3>
      <p>
        This plot shows sequence diversity across the alignment as Shannon diversity, smoothed over a {{ smoothing_window }}-base window.
      </p>
      <p>
        Shannon diversity summarizes how mixed the bases are at each alignment position: low values mean most sequences share the same base,
        and higher values mean more diversity at a given position. For a column with possible states A/T/C/G (Ns and gaps are ignored), the theoretical range is 0 to log₂(4) ≈ 2.0.
        <br>
        High diversity can be a sign of true biological variation, but it can also indicate problematic sites with many sequencing errors or misalignments.
      </p>
      {% if diversity_plot_html %}
        {{ diversity_plot_html | safe }}
      {% else %}
        <p>No diversity plot available.</p>
      {% endif %}
    </div>
  </div>
{% endblock %}