<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../../css/style.css">

<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.tablesorter.min.js"></script>

<script type="text/javascript" >
var counter = 1;
function addInput(divName){
     var newdiv = document.createElement('div');
     newdiv.innerHTML = "<b>Locus " + (counter + 1) + "</b><br> GenBank accession: <input type='text' required name='myInputs[]'> Start nt: <input type='number' name='myStartCoords[]' placeholder='N/A'> End nt: <input type='number' name='myEndCoords[]' placeholder='N/A'> <br><br>";
     document.getElementById(divName).appendChild(newdiv);
     counter++;
}
</script>

<script>
$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);

</script>
<style>
table {
    border-width: thin;
    border-spacing: 2px;
    border-style: none;
    border-color: black;
}
</style>
</head>
<body>
    <table id="myTable" class="tablesorter" border=1>
    <thead>
    <tr>
        <th>MIBiG Protein</th>
        <th>Description</th>
        <th>MIBiG Cluster</th>
        <th>MiBiG Product</th>
        <th>% ID</th>
        <th>% Coverage</th>
        <th>BLAST Score</th>
        <th>E-value</th>
    </tr>
    </thead>
    <tbody>
    {% for line in mibig_homology_file_lines %}
          <tr>
              <td>{{line.gene_id}}</td>
              <td>{{line.gene_description}}</td>
              <td><a href="https://mibig.secondarymetabolites.org/go/{{line.mibig_id}}/{{line.mibig_cluster_number}}">{{line.mibig_id}}</a></td>
              <td>{{line.mibig_product}}</td>
              <td>{{line.percent_id}}</td>
              <td>{{"%.1f" % line.coverage}}</td>
              <td>{{line.blast_score}}</td>
              <td>{{line.evalue}}</td>
          </tr>
    {% endfor %}
    </tbody>
  </table>
</body>
