{% 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] %}

      <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" id="stats_table">
            <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>

<!-- Table in this section based off of table in q2-dada2 vizualizer-->
        {% if subset_id|length <= 1 and rep_seq_indicator == True %}
  <div class="row">
    <div class="col-lg-12">
      <h3>Decontam 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.
      <div class="container">
        <p><center>
          <a class="btn btn-default" href="{{ true_fastas[index] }}" target="_blank" rel="noopener noreferrer">
            Download Non-Contaminant Features as a raw FASTA file
          </a>
          <a class="btn btn-default" href="{{ contam_fastas[index] }}" target="_blank" rel="noopener noreferrer">
            Download Contaminant Features as a raw FASTA file
          </a>
        </center></p>
      </div>
      <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="text">Determination</th>
            <th data-tsorter="text">P-Score</th>
            <th data-tsorter="numeric">Abundance</th>
            <th data-tsorter="numeric">Prevalance</th>
            {% if rep_seq_indicator == True %}
            <th data-tsorter="text">Sequence</th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
        {% for sequence in keys %}
          <tr>
            <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 %}
            {% else %}
            <td>-</td>
            <td>-</td>
            {% endif %}
          </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>
        {% else %}
        
              <div class="row">
          <div class="col-lg-12">
            {% if rep_seq_indicator == True %}
            <div class="container">
              <p><center>
                <a class="btn btn-default" href="{{ true_fastas[index] }}" target="_blank" rel="noopener noreferrer">
                  Download Non-Contaminant Features as a raw FASTA file
                </a>
                <a class="btn btn-default" href="{{ contam_fastas[index] }}" target="_blank" rel="noopener noreferrer">
                  Download Contaminant Features as a raw FASTA file
                </a>
              </center></p>
            </div>
            {% endif %}
             </div>
                 </div>

      {% endif %}

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

  {% endfor %}


{% endblock %}