{% extends "layouts/base.html" %}
{% from "macros/links.html" import omim_links %}
{% from "macros/filters.html" import filters_form %}

{% block nav_left %}
  <li>
    <a href="{{ url_for('public.case', case_id=case_id) }}">{{ case_id }}</a>
  </li>
{% endblock %}

{% block container %}
  <div class="panel-group" id="filter-accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#view-filters">Filters</a>
        </h4>
      </div>

      <div id="view-filters" class="panel-collapse collapse {% if is_active %}in{% endif %}">
        <div class="panel-body">
          {{ filters_form(case_id, db, inheritance_models, consequences, impact_severities, filters, sv_types=sv_types, gene_lists=gene_lists) }}
        </div>
      </div>
    </div>
  </div>

  <div class="well well-sm text-center">
    {% if nr_of_variants >= 1000 %}
      Showing {{ variants|length }} of 1000+ variants
    {% else %}
      Showing {{ variants|length }} of {{ nr_of_variants }} matching variants
    {% endif %}
  </div>

  <div class="table-responsive">
    <table class="table table-bordered table-hover" id="variants_list">
      <thead>
        <tr>
          <th>Rank#</th>
          <th>Score</th>
          <th>Type</th>
          <th>Start Loc</th>
          <th>Stop Loc</th>
          <th>Length</th>
	        <th>Freq</th>
          <th>Nr Genes</th>
          <th>Gene</th>
        </tr>
      </thead>
      <tbody>
        {% for variant in variants %}
          <tr>
            <td><a href="{{ url_for('variants.variant', case_id=case_id, variant_id=variant.variant_id) }}">{{ variant.index }}</a></td>
            <td>{{ variant.rank_score or '-' }}</td>
            <td>{{ variant.sv_type or '-' }}</td>
            <td>{{ variant.cytoband_start or '-' }}</td>
            <td>{{ variant.cytoband_stop or '-' }}</td>
            <td align="right">{{ '{0:,}'.format(variant.sv_len) }}</td>
	    <td>
	      {% if(variant.max_freq) %}
        {# Is this a counts (int) freq or fraction (float) freq? #}
	        {% if(variant.max_freq >= 1) %}
	          {{ variant.max_freq }}
	        {% else %}
         	  {{ variant.max_freq|round(3) }}
	        {% endif %}
	      {% else %}
                  <small class="text-muted">-</small>
              {% endif %}
	      </td>
            <td>{{ variant.nr_genes }}</td>
            <td>
              {% if variant.nr_genes >= 5 %}
                {{ variant.gene_symbols[:2]|join(', ') }} [...] {{ variant.gene_symbols[-2:]|join(', ') }}
              {% else %}
                {{ variant.gene_symbols|join(', ') }}
              {% endif %}
          </td>
          </tr>
        {% else %}
          <p>No more variants to show.</p>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <a href="{{ url_for('variants.variants', case_id=case_id, **filters.query_dict) }}" class="btn btn-default">Load more</a>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script type="text/javascript" charset="utf-8">
  $('.selectpicker').selectpicker();
  $(document).ready(function(){
    $('#variants_list').DataTable({
      "paging":   true,
      "pageLength": 30,
      "searching": false,
      "info": false
    });
   });
  </script>
{% endblock %}
