{% extends "layout_bs4.html" %}

{% block css %}
{{ super() }}
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css">
{% endblock %}

{% block top_nav %}
  <li class="nav-item active">
    <span class="navbar-text">HPO terms</span>
  </li>
{% endblock %}

{% block content_main %}
<div class="container-float">
  <div class="row mt-3">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">HPO terms</div>
        <div class="card-body">
          {% if phenotypes|length == 0 %}
            The search didn't return any phenotype term
          {% else %}
            <table id="phenotypes_table" class="table table-sm">
                <thead>
                  <th>HPO term</th>
                  <th>Phenotype description</th>
                  <th>Number of associated genes</th>
                </thead>
                {% for pheno in phenotypes %}
                <tr>
                  <td><a href="http://hpo.jax.org/app/browse/term/{{pheno.hpo_id}}" target="_blank">{{ pheno.hpo_id }}</a></td>
                  <td>{{ pheno.description }}</td>
                  <td>{{pheno.genes|length}}</td>
                </tr>
                {% endfor %}
              </table>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
<script>
  $(document).ready(function() {
    $('#phenotypes_table').DataTable( {
        paging: false,
        dom: 'fBrtip',
        buttons: [
          {
            extend: 'excelHtml5',
            title: 'scout_phenotypes'
          },
          'copyHtml5'
        ]
    } );
} );
</script>
{% endblock %}