{% extends "layout.html" %}
{% from "utils.html" import flash_messages, comments_table %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }} - SV variants
{% endblock %}

{% block top_nav %}
  {{ super() }}
  <li>
    <a href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li>
    <a href="{{ url_for('cases.cases', institute_id=institute._id) }}">
      {{ institute.display_name }}
    </a>
  </li>
  <li>
    <a href="{{ url_for('cases.case', institute_id=institute._id, case_name=case.display_name) }}">
      {{ case.display_name }}
    </a>
  </li>
  <li class="active">
    <span class="navbar-text">{{ variant_type|capitalize }}  Structural variants</span>
  </li>
{% endblock %}

{% block top_nav_right %}
  <li><p class="navbar-text">Panels: {{ (form.gene_panels.data or ['All'])|join(',') }}</p></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li>
        <a href="{{ url_for('variants.sv_variants', institute_id=institute._id,
                            case_name=case.display_name, variant_type=variant_type,
                            gene_panels=['hpo']) }}">
          HPO gene list
        </a>
      </li>
      <li>
        <a href="{{ url_for('variants.sv_variants', institute_id=institute._id, case_name=case.display_name, variant_type=form.variant_type.data, gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">Reset filters</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="{{ url_for('variants.sv_variants', institute_id=institute._id, case_name=case.display_name, variant_type=variant_type, gene_panels=case.panels|selectattr('is_default')|map(attribute='panel_name')|list) }}">Reset filters</a>
  </li>
  {{ super() }}
{% endblock %}

{% block content %}
<form method="POST" id="filters_form" action="{{url_for('variants.sv_variants', institute_id=institute._id, case_name=case.display_name)}}" >
  <div class="container-fluid main">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFilters">
              SvFilters
            </a>
          </h4>
        </div>
        <div id="collapseFilters" class="panel-collapse collapse">
          <div class="panel-body">{{ filters_form() }}</div>
        </div>
      </div>
    </div>
    {{ flash_messages() }}
  </div>

  <div class="table-responsive">
    <table id="variantsTable" class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Score</th>
          <th>Type</th>
          <th>Chr</th>
          <th>Start loc</th>
          <th>Stop loc</th>
          <th>Length</th>
          <th>Region</th>
          <th>Function</th>
          <th>Frequency</th>
          <th>Gene(s)</th>
        </tr>
      </thead>
      <tbody>
        {% for variant in variants %}
          {{ variant_row(variant) }}
        {% else %}
          <tr>
              <td colspan="10">No matching variants</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="container-fluid">
    {{ pagination() }}
  </div>
</form>
{% endblock %}

{% macro filters_form() %}
    <input type="hidden" name="variant_type" value="{{ variant_type }}">
    <div class="form-group">
      <div class="row">
        <div class="col-xs-3">
          {{ form.gene_panels.label(class="control-label") }}
          {{ form.gene_panels(class="form-control") }}
        </div>
        <div class="col-xs-3">
          {{ form.region_annotations.label(class="control-label") }}
          {{ form.region_annotations(class="form-control") }}
        </div>
        <div class="col-xs-3">
          {{ form.functional_annotations.label(class="control-label") }}
          {{ form.functional_annotations(class="form-control") }}
        </div>
        <div class="col-xs-3">
          {{ form.genetic_models.label(class="control-label") }}
          {{ form.genetic_models(class="form-control") }}
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-xs-3">
          {{ form.hgnc_symbols.label(class="control-label") }}
          {{ form.hgnc_symbols(class="form-control") }}
        </div>
        <div class="col-xs-2">
          {{ form.size.label(class="control-label") }}
          {{ form.size(class="form-control", type="number") }}
        </div>
        <div class="col-xs-2">
          {{ form.size_shorter.label(class="control-label") }}
          <div>{{ form.size_shorter() }}</div>
        </div>
        <div class="col-xs-2">
          {{ form.decipher.label(class="control-label") }}
          <div>{{ form.decipher() }}</div>
        </div>
        <div class="col-xs-3">
          {{ form.clinsig.label(class="control-label") }}
          {{ form.clinsig(class="form-control") }}
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-xs-3">
          {{ form.chrom.label(class="control-label") }}
          {{ form.chrom(class="form-control") }}
        </div>
        <div class="col-xs-2">
          {{ form.gnomad_frequency.label(class="control-label") }}
          {{ form.gnomad_frequency(class="form-control") }}
        </div>
        <div class="col-xs-2">
	         {{ form.clingen_ngi.label(class="control-label") }}
	          {{ form.clingen_ngi(class="form-control") }}
        </div>
        <div class="col-xs-2">
          {{ form.swegen.label(class="control-label") }}
          {{ form.swegen(class="form-control") }}
        </div>
        <div class="col-xs-3">
          {{ form.svtype.label(class="control-label") }}
          {{ form.svtype(class="form-control") }}
        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
	<div class="col-xs-3">
	</div>
	<div class="col-xs-3">
	</div>
        <div class="col-xs-6">
          <div class="row">
            <div class="col-xs-4">
              {{ form.filter_variants(class_="btn btn-primary form-control") }}
            </div>
            <div class="col-xs-4">
             {{ form.clinical_filter(class_="btn btn-default form-control") }}
            </div>
            <div class="col-xs-4">
              {{ form.export(class_="btn btn-warning form-control") }}
            </div>
          </div>
        </div>
      </div>
    </div>
{% endmacro %}

{% block scripts %}
  {{ super() }}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-table-headers/0.1.19/js/jquery.stickytableheaders.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
  <script>
    $(function () {
      $('[data-toggle="popover"]').popover({
        container: 'body',
      });

      $('table').stickyTableHeaders({
        fixedOffset: $(".navbar-fixed-top")
      });

      $('select[multiple]').multiselect({
        buttonWidth: '100%'
      });
    })
  </script>
{% endblock %}

{% macro cell_rank(variant) %}
  <a class="variants-row-item flex-small layout"
     href="{{ url_for('variants.sv_variant', institute_id=institute._id,
                      case_name=case.display_name, variant_id=variant._id) }}">
    {{ variant.variant_rank }}
  </a>
  {% set comment_count = variant.comments.count() %}
  {% if variant.manual_rank %}
    <span class="badge pull-right" title="Manual rank">{{ variant.manual_rank }}</span>
  {% endif %}

  {% if comment_count > 0 %}
    <a href="#"
      class="badge pull-right"
      data-toggle="popover"
      data-placement="right"
      data-html="true"
      data-trigger="hover click"
      data-content="<small>{{ comments_table(institute, case, variant.comments, variant._id) }}</small>">
      {{ comment_count }}
      <span class="glyphicon glyphicon-comment"></span>
    </a>
  {% endif %}
{% endmacro %}

{% macro variant_row(variant) %}
  {% if variant.dismiss_variant %}
  <tr class="dismiss">
  {% else %}
  <tr>
  {% endif %}
    <td>
      {{ cell_rank(variant) }}
    </td>
    <td>{{ variant.rank_score|int }}</td>
    <td>{{ variant.sub_category|upper }}</td>
    <td>{{ variant.chromosome if variant.chromosome == variant.end_chrom else variant.chromosome+'-'+variant.end_chrom }}</td>
    <td>{{ variant.position }}</td>
    <td>{{ 'inf' if variant.end == 100000000000 else variant.end }}</td>
    <td>{{ variant.length }}</td>
    <td>
      {% for annotation in variant.region_annotations[:3] %}
        <div>{{ annotation }}</div>
      {% endfor %}
    </td>
    <td>
      {% for annotation in variant.functional_annotations[:3] %}
        <div>{{ annotation }}</div>
      {% endfor %}
    </td>
    <td>
      {% if variant.gnomad_frequency %}
        {{ variant.gnomad_frequency|human_decimal }}
      {% endif %}
    </td>
    <td>
      <div class="flex">
        <div>
          {% if variant.hgnc_symbols|length >= 5 %}
            {{ variant.hgnc_symbols[:2]|join(', ') }} [...] {{ variant.hgnc_symbols[-2:]|join(', ') }}
          {% else %}
            {% for symbol in variant.hgnc_symbols %}
              <div>{{ symbol }}</div>
            {% endfor %}
          {% endif %}
        </div>

        {% if variant.hgnc_symbols %}
          <span class="badge">{{ variant.hgnc_symbols|length }}</span>
        {% endif %}
      </div>
    </td>
  </tr>
{% endmacro %}

{% macro pagination() %}
  <nav>
    <ul class="pager">
      {% if more_variants %}
        <li class="next">
          <button name="page"  type="submit" class="btn btn-default" value={{ page + 1 }}>Next &rarr;</button>
        </li>
      {% else %}
        <i class="text-muted">No more variants to display</i>
      {% endif %}
      <li class="first">
       <button name="page" type="submit" class="btn btn-default" value=1>First page</button>
      </li>
    </ul>
  </nav>
{% endmacro %}
