{% extends "layout.html" %}
{% from "variants/utils.html" import compounds_table %}
{% from "variants/components.html" import gene_cell, frequency_cell %}
{% from "utils.html" import flash_messages, comments_table %}

{% block title %}
  {{ super() }} - {{ institute.display_name }} - {{ case.display_name }} - {{ form.variant_type.data|capitalize }} 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">{{ form.variant_type.data|capitalize }} SNV and INDELs</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.variants', institute_id=institute._id,
                            case_name=case.display_name, variant_type=form.variant_type.data,
                            gene_panels=['hpo']) }}">
          HPO gene list
        </a>
      </li>
      <li>
        <a href="{{ url_for('variants.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>
  {{ super() }}
{% endblock %}

{% block content %}
  <form method="POST" id="filters_form" action="{{url_for('variants.variants', institute_id=institute._id, case_name=case.display_name)}}" enctype="multipart/form-data">
    <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">
		Filters
              </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 class="table table-bordered table-hover">
	<thead>
          <tr>
            <th class="col-xs-1" title="Rank position">Rank</th>
            <th title="Rank score">Score</th>
            <th title="Chromosome">Chr.</th>
            <th title="HGNC symbols" class="col-xs-2">Gene</th>
            <th title="1000 Genomes">PopFreq</th>
            <th title="CADD score">CADD</th>
            <th class="col-xs-2" title="Gene region annotation">Gene annotation</th>
            <th class="col-xs-3" title="Functional annotation">Func. annotation</th>
            <th class="col-xs-3" title="Inheritance models">Inheritance model</th>
          </tr>
	</thead>
	<tbody>
          {% for variant in variants %}
            {% if variant.dismiss_variant %}
              <tr class="dismiss">
	    {% else %}
	      <tr>
	    {% endif %}
              <td>{{ cell_rank(variant) }}</td>
              <td class="text-right">{{ variant.rank_score|int }}</td>
              <td>{{ variant.chromosome }}</td>
              <td>{{ gene_cell(variant) }}</td>
              <td class="text-right">{{ frequency_cell(variant) }}</td>
              <td class="text-right">{{ cell_cadd(variant) }}</td>
              <td>
                {% for annotation in variant.region_annotations %}
                  <div>{{ annotation }}</div>
                {% endfor %}
              </td>
              <td>
                {% for annotation in variant.functional_annotations %}
                  <div>{{ annotation }}</div>
                {% endfor %}
              </td>
              <td>{{ cell_models(variant) }}</td>
            </tr>
          {% else %}
          <tr>
            <td colspan="{{ 10 if form.variant_type.data == 'clinical' else 9 }}">
              No matching variants
            </td>
          </tr>
          {% endfor %}
	</tbody>
      </table>
      {{ footer() }}
    </div>
  </form>
{% endblock %}

{% macro cell_rank(variant) %}
  <a class="variants-row-item flex-small layout"
     href="{{ url_for('variants.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.acmg_classification %}
    <span class="badge pull-right" title="{{ variant.acmg_classification.label }}">
      {{ variant.acmg_classification.short }}
    </span>
  {% elif 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="{{ comments_table(institute, case, variant.comments, variant._id) }}"
       title=""
       >
      {{ comment_count }}
      <span class="glyphicon glyphicon-comment"></span>
    </a>
  {% endif %}
{% endmacro %}

{% macro cell_cadd(variant) %}
  <div data-toggle="tooltip" data-placement="left" data-html="true" title="
    <div class='text-left'>
      <strong>Sift</strong>
      {{ variant.sift_predictions|join(',') }} <br>
      <strong>PolyPhen</strong>
      {{ (variant.polyphen_predictions or ['-'])|join(',') }}
    </div>
  ">
    {{ variant.cadd_score }}
  </div>
{% endmacro %}

{% macro cell_models(variant) %}
  {% for model in (variant.genetic_models or []) %}
    <div class="label label-default">{{ model }}</div>
  {% endfor %}

  {% if variant.compounds %}
    <a href="#" class="label label-primary" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover click" data-content="{{ compounds_table(institute, case, variant.compounds[:20]) }}">Compounds</a>
  {% endif %}
{% endmacro %}

{% macro footer() %}
  <div class="container-fluid">
    <div class="form-group text-center">
      {% if more_variants %}
        <div class="row">
	  <div class="col-xs-6">
             <button name="page" type="submit" class="btn btn-default" value={{ page + 1 }}>Next page</button>
	  </div>
	  <div class="col-xs-6">
            <button name="page" type="submit" class="btn btn-default" value=1>First page</button>
	  </div>
	</div>
      {% else %}
        <i class="text-muted">No more variants to display</i>
        <button name="page" type="submit" class="btn btn-default" value=1>First page</button>
      {% endif %}
    </div>
  </div>
{% endmacro %}

{% macro filters_form() %}
    {{ form.csrf_token }}
    {{ form.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.symbol_file.label(class="control-label") }}
	  {{ form.symbol_file(class="form-control") }}
	</div>
        <div class="col-xs-2">
          {{ form.region_annotations.label(class="control-label") }}
          {{ form.region_annotations(class="form-control") }}
        </div>
        <div class="col-xs-2">
          {{ form.functional_annotations.label(class="control-label") }}
          {{ form.functional_annotations(class="form-control") }}
        </div>
        <div class="col-xs-2">
          {{ 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-1">
          {{ form.cadd_score.label(class="control-label") }}
          {{ form.cadd_score(class="form-control") }}
        </div>
        <div class="col-xs-2">
          {{ form.cadd_inclusive.label(class="control-label") }}
          <div>{{ form.cadd_inclusive() }}</div>
        </div>
        <div class="col-xs-2">
          {{ form.clinsig.label(class="control-label") }}
          {{ form.clinsig(class="form-control") }}
        </div>
	<div class="col-xs-2">
	  {{ form.clinsig_confident_always_returned.label(class="control-label") }}
	  <div>{{ form.clinsig_confident_always_returned() }}</div>
	</div>
	<div class="col-xs-2">
	  {{ form.spidex_human.label(class="control-label") }}
	  {{ form.spidex_human(class="form-control") }}
	</div>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
        <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.local_obs.label(class="control-label") }}
          {{ form.local_obs(class="form-control") }}
        </div>
        <div class="col-xs-2">
          {{ form.chrom.label(class="control-label") }}
          {{ form.chrom(class="form-control") }}
        </div>
        <div class="col-xs-6">
          <label class="control-label">Submit</label>
          <div class="row">
            <div class="col-xs-4">
            {{ form.filter_variants(class_="btn btn-primary form-control",onclick_="remove_export()") }}
             </div>
            <div class="col-xs-4">
             {{ form.clinical_filter(class_="btn btn-default form-control",onclick_="remove_export()") }}
            </div>
            <div class="col-xs-4">
              <button class="btn btn-warning form-control" onclick="add_export()">Filter and export</button>
            </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="tooltip"]').tooltip();
      $('[data-toggle="popover"]').popover({
        container: 'body',
      });

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

      $('select[multiple]').multiselect({
        buttonWidth: '100%'
      });

      document.getElementById('symbol_file').onchange = function() {
        var the_form = document.forms['filters_form'];
        the_form.submit();
      };
    })

    function add_export(){
      var the_form = document.forms['filters_form'];
      var hidden_export = document.createElement('input');

      hidden_export.type = 'hidden';
      hidden_export.name = 'export';
      hidden_export.value = 'True';
      hidden_export.id = 'export';
      the_form.appendChild(hidden_export);
      the_form.submit();
    }

    function remove_export(){
      var the_form = document.forms['filters_form'];
      var hidden_export = document.getElementById('export');
      the_form.removeChild(hidden_export);
    }

  </script>
{% endblock %}
