{% extends "base.html" %}
{% block content %}
  <div class="section">
    <div class="toc card">
      <h3>Table of contents</h3>
      <ol>
        <li><a href="#summary">Summary</a></li>
        <li><a href="#mask-sites">Mask file entries</a></li>
        <li><a href="#masked-sites">Masked sites across alignment</a></li>
        <li><a href="#masked">Masked sites by sequence</a></li>
      </ol>
    </div>

    <div id="summary" class="card">
      <h3>1. Summary</h3>
      <p>Sequences: {{ summary.sequences }}</p>
      <p>Alignment length: {{ summary.alignment_length }}</p>
      <p>Masked sites: {{ summary.masked_sites }}</p>
      <p>Masked fraction: {{ summary.masked_pct }}</p>
      <p>Sequences removed: {{ summary.sequences_removed }}</p>
      <p>Mask character: {{ summary.mask_character }}</p>
    </div>


    <div id="mask-sites" class="card">
      <h3>2. Mask file entries</h3>
      {% if mask_sites_table %}
        <div class="table-wrap table-scroll">
          <table class="datatable">
            <thead>
              <tr>
                {% for header in mask_sites_table.headers %}
                  <th>{{ header }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in mask_sites_table.rows %}
                <tr>
                  {% for cell in row %}
                    <td>{{ cell }}</td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p>No mask file entries available.</p>
      {% endif %}
    </div>

    <div id="masked-sites" class="card">
      <h3>3. Masked sites across alignment</h3>
      {% if masked_sites_plot_html %}
        <p class="caption">
          Red blocks represent masked positions along the alignment for each sequence.
          {% if masked_sites_plot_note %}
            {{ masked_sites_plot_note }}
          {% endif %}
        </p>
        {{ masked_sites_plot_html | safe }}
      {% else %}
        <p>No masked sites to display.</p>
      {% endif %}
    </div>

    <div id="masked" class="card">
      <h3>4. Masked sites by sequence</h3>
      {% if masked_table %}
        <div class="table-wrap table-scroll">
          <table class="datatable">
            <thead>
              <tr>
                {% for header in masked_table.headers %}
                  <th>{{ header }}</th>
                {% endfor %}
              </tr>
            </thead>
            <tbody>
              {% for row in masked_table.rows %}
                <tr>
                  {% for cell in row %}
                    <td>{{ cell }}</td>
                  {% endfor %}
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <p>No masked-site summary available.</p>
      {% endif %}
    </div>
  </div>
{% endblock %}