{% extends 'base.html' %}

<style>
        hr {
            border: none;
            border-top: 1px solid #888;
            margin: 20px 0;
        }
 </style>
<style>
      .container {
            display: flex;
            justify-content: center;
        }
</style>
<style>
    caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
    }
</style>


{% block content %}
{% for index in range(image_paths|length) %}
{% set data = data_arr[index] %}
{% set keys = table_keys_arr[index] %}
<div id="script_subset_id_{{ index }}" data-rows-per-page="{{ subset_id|length }}"></div>

<h1 ALIGN=CENTER>
    {% if subset_id|length <= 1 %}
        Histogram of Decontam Scores
    {% else %}
        Histogram of Decontam Scores<br>
        {{ subset_id[index] }}
    {% endif %}
</h1>

<div class='row' ALIGN=CENTER>
    <div class='col-md-12' ALIGN=CENTER>
        <img src='{{ image_paths[index] }}'>
    </div>
</div>

<div class="row">
    <div class="col-lg-4 col-md-offset-4">
        <table class="table table-striped table-responsive mb-0 pb-0">
            <caption>* {{ unknownr[index] }} Non-Contaminant {{ feat_or_read[index] }} were assigned a score of NA (not plotted)</caption>
            <thead>
                <tr>
                    <th>{{ contam_label[index] }}</th>
                    <th>{{ true_label[index] }}</th>
                    <th>Contaminant {{ feat_or_read[index] }} %</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{ contamer[index] }}</td>
                    <td>{{ truer[index] }}</td>
                    <td>{{ percenter[index] }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        {% if subset_id|length <= 1 %}
            <h3>Decontam Sequence Table</h3>
        {% else %}
            <h3>Decontam Sequence Table - {{ subset_id[index] }}</h3>
        {% endif %}

        {% if rep_seq_indicator == True %}
        <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>
        <div class="container">
          <p><center>
            <a class="btn btn-default" href="{{ contam_fastas[index] }}" target="_blank" rel="noopener noreferrer">
                Download Contaminant Features as a raw FASTA file
              </a>
            <a class="btn btn-default" href="{{ true_fastas[index] }}" target="_blank" rel="noopener noreferrer">
              Download Non-Contaminant Features as a raw FASTA file
            </a>
          </center></p>
        </div>
        {% endif %}

        <div>
            {% if subset_id|length > 1 %}
                <button id="prev_page_{{ index }}">Previous</button>
                <span id="page_info_{{ index }}"></span>
                <button id="next_page_{{ index }}">Next</button>
            {% endif %}
            <i>Click on a Column header to sort the table.</i>
        </div>

        <table class="table table-striped table-hover" id="seq_table_{{ index }}">
            <thead>
                <tr>
                    <th class="sortable">Feature ID<span class="sort-indicator"></span></th>
                    <th class="sortable">Determination<span class="sort-indicator"></span></th>
                    <th class="sortable">P-Score<span class="sort-indicator"></span></th>
                    <th class="sortable">Abundance<span class="sort-indicator"></span></th>
                    <th class="sortable">Prevalence<span class="sort-indicator"></span></th>
                    {% if rep_seq_indicator == True %}
                    <th class="sortable">Sequence<span class="sort-indicator"></span></th>
                    {% endif %}
                </tr>
            </thead>
            <tbody id="table_body_{{ index }}">
            {% for sequence in keys %}
                <tr class="table-row">
                    <td>{{ sequence }}</td>
                    {% if sequence in data %}
                    <td>{{ data[sequence].contam_or_naw }}</td>
                    <td>{{ data[sequence].p_val | round(2, 'common') }}</td>
                    <td>{{ data[sequence].read_nums | int }}</td>
                    <td>{{ data[sequence].prevalence | int }}</td>
                    {% if rep_seq_indicator == True %}
                    <td><samp><a target="_blank" href="{{ data[sequence].url }}" rel="noopener noreferrer">{{ data[sequence].seq }}</a></samp></td>
                    {% endif %}
                    {% endif %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script src="./js/pag_sorter.min.js" type="text/javascript"></script>
<script>
  init_pag_sortable_table("{{ index }}");
</script>

{% if subset_id|length > 1 %}
    <hr>
{% endif %}
{% endfor %}
{% endblock %}