{% extends "genes/layout.html" %}

{% block title %}
  {{ super() }} - Genes - {{ symbol }}
{% endblock %}

{% block top_nav %}
  <li>
    <a href="{{ url_for('genes.genes') }}">Genes</a>
  </li>
  <li class="active">
    <p class="navbar-text">{{ symbol }}</p>
  </li>
{% endblock %}

{% block content_main %}
  {{ super() }}

  {# ROW 0 #}
  <div class="row">
    <div class="col-md-12">
      <typeahead url="/api/v1/genes" v-on:send="visitGene" bootstrap="yes"></typeahead>
    </div>
  </div>
  
  <h1>
    {{ symbol }} <small>{{ ensembl_id }}</small>
  </h1>
  <p class="lead">{{ description }}</p>

  {% for build, gene in builds.items() %}
  	<div class="panel panel-default">
      <div class="panel-heading">GRCh{{ build }}</div>
	  <div class="panel-body">
	  	{% if gene %}
		  <div class="row">
		    <div class="col-md-6">{{ overview(gene) }}</div>
		    <div class="col-md-6">{{ transcripts(gene) }}</div>
		  </div>
		{% else %}
	      <div>No info for build GRCh{{ build }}.</div>
		{% endif %}
	  </div>
  	</div>
  {% endfor %}
{% endblock %}

{% macro overview(gene) %}
  <ul class="list-group">
    <li class="list-group-item">
      Aliases
      <span class="pull-right">{{ gene.aliases|join(', ') }}</span>
    </li>
    <li class="list-group-item">
      Chromosome
      <span class="pull-right">{{ gene.chromosome }}</span>
    </li>
    <li class="list-group-item">
      Position
      <span class="pull-right">{{ gene.position }}</span>
    </li>

    <li class="list-group-item">
      Incomplete penetrance (HPO)
      <span class="pull-right">
        {{ 'yes' if gene.incomplete_penetrance else 'unknown' }}
      </span>
    </li>

    <li class="list-group-item">
      Inheritance models
      <span class="pull-right">
        {{ gene.inheritance_models|join(', ') or '-' }}
      </span>
    </li>
  </ul>
{% endmacro %}

{% macro transcripts(gene) %}
  <div class="panel panel-default">
    <div class="panel-heading">Transcripts</div>
    <ul class="list-group">
      {% for transcript in gene.transcripts %}
        <li class="list-group-item {{ 'list-group-item-info' if transcript.is_primary }}">
          {{ transcript.ensembl_transcript_id }} / {{ transcript.refseq_id or '-' }} {% if transcript.is_primary %}<small>(primary)</small>{% endif %}
		  <span class="pull-right">{{ transcript['position'] }}</span>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}
