{% 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, gene_lists=gene_lists, queries=queries) }}
        </div>
      </div>
    </div>
  </div>

  {% if filters.gemini_query %}
    <form action="{{ url_for('variants.queries') }}" method="POST">
      <div class="panel panel-default">
        <div class="panel-heading">Store GEMINI query</div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-5">
              <input class="form-control" type="text" name="query" value="{{ filters.gemini_query }}">
            </div>
            <div class="col-xs-5">
              <input class="form-control" type="text" name="name" placeholder="Name (optional)">
            </div>
            <div class="col-xs-2">
              <button class="form-control" type="submit">Save</button>
            </div>
          </div>
        </div>
      </div>
    </form>
  {% endif %}

  <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>Chromosome</th>
          <th>Gene</th>
          <th>Consequence</th>
          <th>MaxAF</th>
          <th>CADD</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.CHROM }}</td>
            <td>{{ variant.gene_symbols|join(', ') }}</td>
            <td>{{ variant.most_severe_consequence or '-' }}</td>
            <td>
	      {% if variant.max_freq %}
	         {{ variant.max_freq|round(4) }}
	      {% else %}
	          <small class="text-muted">-</small>
              {% endif %}
            </td>

            <td>{{ variant.cadd_score or '-' }}</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({
        dom: 'Bfrtip',
        "paging":   true,
        "pageLength": 30,
        "searching": false,
        "info": false,
        "colReorder": true,
        "paging": true,
        buttons: ['colvis']
      });
    });
  </script>
{% endblock %}
