{% extends "layout.html" %}

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

{% block content_main %}
  <div class="panel panel-default">
    <div class="panel-body">
      {{ search_form() }}
    </div>
    <div class="panel-footer text-center">
      Limiting the search to {{ phenotypes|length }} HPO phenotypes
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div class="panel-heading">HPO terms</div>
          {% if phenotypes|length == 0 %}
            The search didn't return any phenotype term
          {% else %}
            <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://compbio.charite.de/hpoweb/showterm?id={{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>
{% endblock %}

{% macro search_form() %}
  <form action="{{ url_for('phenotypes.hpo_terms')}}" method="POST" accept-charset="utf-8">
    <div class="row">
      <div class="col-md-6 col-xs-6">
        <div class="input-group">
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
          </span>
          <input name="hpo_term" class="form-control" placeholder="search HPO" value="{{ query if query }}">
        </div>
      </div>
      <div class="col-md-2 col-xs-2">
        <div class="number">
          <label>
              <input name="limit" type="number" class="form-control" placeholder="Limit" value={{limit}}>
          </label>
        </div>
      </div>
      <div class="col-md-2 col-xs-2">
        <button type="submit" class="form-control">Search</input>
      </div>
    </div>
  </form>
{% endmacro %}
