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

{% 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="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>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>{{ variant.nr_genes }}</td>
            <td>
              {% if variant.genes|length >= 5 %}
                {{ omim_links(variant.genes[:2]) }} [...] {{ omim_links(variant.genes[-2:]) }}
              {% else %}
                {{ omim_links(variant.genes) }}
              {% 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":   false,
      "searching": false,
      "info": false
    });
   });
  </script>
{% endblock %}
